/* MercadoVentas · Trust + Energy · v2.0.0
   Fuente de verdad: 02_sistema_marca/tokens.json + módulos src/ no generados. Compilar con node herramientas/compilar.mjs.
   Todo se limita a .mv-sitio. No cargar en MercadoGestión. Sin @import ni fuentes remotas.
   Los estilos legados sin capa tienen prioridad sobre reglas normales dentro de @layer:
   auditar, migrar o retirar selectivamente el legado; no resolverlo con !important. */
@layer mv.tokens, mv.base, mv.tipografia, mv.estructura, mv.controles,
       mv.formularios, mv.comercio, mv.estados, mv.utilidades, mv.accesibilidad;

/* Generado desde 02_sistema_marca/tokens.json; no editar a mano. */
@layer mv.tokens {
  :root,
  .mgui-vd,
  .mv-sitio {
    --mv-ancho-maximo: 100%;
    --mv-seccion-ancho: 100%;
    --mg-sec-max-width: 100%;
  }
  .mv-sitio {
    --mv-marino: #0C256F;
    --mv-azul: #1647D8;
    --mv-ambar: #E5B65A;
    --mv-celeste: #087F8C;
    --mv-hielo: #EAEEF9;
    --mv-gris: #5F6B88;
    --mv-blanco: #FFFFFF;
    --mv-fondo: #F3F6FD;
    --mv-fondo-ml: #F3F6FD;
    --mv-superficie: #FFFFFF;
    --mv-amarillo-ml: #E5B65A;
    --mv-amarillo-ml-suave: #F1ECE1;
    --mv-azul-ml: #1647D8;
    --mv-azul-ml-hover: #133BBD;
    --mv-verde-ml: #087F8C;
    --mv-verde-ml-fondo: #E5F5EC;
    --mv-separador-ml: #EAEEF9;
    --mv-sombra-buscador-ml: 0 1px 2px 0 rgba(13, 21, 40, .14);
    --mv-sombra-tarjeta-ml: 0 1px 3px 0 rgba(13, 21, 40, .08);
    --mv-radio-xs: .25rem;
    --mv-texto: #0D1528;
    --mv-texto-secundario: #3C4865;
    --mv-texto-inverso: #FFFFFF;
    --mv-linea: #D2DBED;
    --mv-borde-control: #B8C7E2;
    --mv-accion: #3F6CDA;
    --mv-accion-texto: #FFFFFF;
    --mv-accion-resaltada: #315CC9;
    --mv-accion-resaltada-texto: #FFFFFF;
    --mv-explorar: #1647D8;
    --mv-explorar-resaltado: #133BBD;
    --mv-enlace: #1647D8;
    --mv-enlace-inverso: #E5B65A;
    --mv-exito: #0F7B43;
    --mv-exito-fondo: #E5F5EC;
    --mv-error: #C0262D;
    --mv-error-fondo: #FCEBEC;
    --mv-advertencia: #9A5B00;
    --mv-advertencia-fondo: #FDF3DF;
    --mv-informacion: #1647D8;
    --mv-informacion-fondo: #EAEEF9;
    --mv-foco: #1647D8;
    --mv-fuente: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mv-fuente-titulos: Montserrat, Inter, system-ui, sans-serif;
    --mv-texto-xs: .75rem;
    --mv-texto-sm: .875rem;
    --mv-texto-md: 1rem;
    --mv-texto-lg: 1.125rem;
    --mv-texto-xl: 1.5rem;
    --mv-texto-2xl: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);
    --mv-texto-portada: clamp(2.25rem, 1.7rem + 2.8vw, 4.75rem);
    --mv-espacio-1: .25rem;
    --mv-espacio-2: .5rem;
    --mv-espacio-3: .75rem;
    --mv-espacio-4: 1rem;
    --mv-espacio-5: 1.25rem;
    --mv-espacio-6: 1.5rem;
    --mv-espacio-8: 2rem;
    --mv-espacio-10: 2.5rem;
    --mv-espacio-12: 3rem;
    --mv-espacio-16: 4rem;
    --mv-radio-sm: .5rem;
    --mv-radio-md: .875rem;
    --mv-radio-lg: 1.25rem;
    --mv-radio-xl: 1.75rem;
    --mv-radio-pildora: 999px;
    --mv-sombra-sm: 0 2px 6px rgb(7 27 82 / .06);
    --mv-sombra-md: 0 12px 32px rgb(7 27 82 / .09);
    --mv-sombra-lg: 0 24px 64px rgb(7 27 82 / .16);
    --mv-ancho: 100%;
    --mv-ancho-maximo: 100%;
    --mv-seccion-ancho: 100%;
    --mg-sec-max-width: 100%;
    --mv-transicion: 160ms;
    --mv-z-cabecera: 20;
    --mv-z-flotante: 30;
    --mv-z-aviso: 40;
    --mv-cobalto: #0A2E8A;
    --mv-accion-borde: #9A4E00;
    color-scheme: light;
  }
  .mv-sitio[data-mv-tema="oscuro"] {
    --mv-fondo: #06122F;
    --mv-superficie: #102347;
    --mv-texto: #F8FAFF;
    --mv-texto-secundario: #BACAE1;
    --mv-linea: #3D5275;
    --mv-borde-control: #879AB8;
    --mv-enlace: #8CD5FF;
    --mv-hielo: #152D56;
    color-scheme: dark;
  }
}

@layer mv.base {
  .mv-sitio, .mv-sitio *, .mv-sitio *::before, .mv-sitio *::after { box-sizing: border-box; }
  .mv-sitio { margin: 0; min-block-size: 100dvh; background: var(--mv-fondo); color: var(--mv-texto); font: 400 var(--mv-texto-md)/1.55 var(--mv-fuente); -webkit-text-size-adjust: 100%; }
  .mv-sitio :where(h1,h2,h3,h4,p,figure,blockquote,dl,dd) { margin: 0; }
  .mv-sitio :where(img,video,svg) { max-inline-size: 100%; }
  .mv-sitio img { display: block; block-size: auto; }
  .mv-sitio :where(button,input,select,textarea) { font: inherit; }
  .mv-sitio button { cursor: pointer; }
  .mv-sitio :where(button:disabled,input:disabled,select:disabled,textarea:disabled) { cursor: not-allowed; }
  .mv-sitio :where(a) { color: var(--mv-enlace); text-underline-offset: .2em; }
  .mv-sitio :where(a:hover) { text-decoration-thickness: 2px; }
  .mv-sitio :where(ul,ol) { padding-inline-start: 1.5em; }
  .mv-sitio :where(code,pre) { font-family: ui-monospace, Consolas, monospace; }
  .mv-sitio :where(pre) { overflow: auto; padding: 1rem; background: var(--mv-hielo); border-radius: var(--mv-radio-sm); }
  .mv-sitio :where(button, a, input, select, textarea, summary) { -webkit-tap-highlight-color: transparent; }
}

@layer mv.tipografia {
  .mv-sitio :where(h1,h2,h3,h4,.mv-titulo) { font-family: var(--mv-fuente-titulos); letter-spacing: -.025em; line-height: 1.18; font-weight: 750; text-wrap: balance; overflow-wrap: break-word; }
  .mv-sitio :where(h1), .mv-sitio .mv-titulo-portada { font-size: clamp(1.45rem, 1.2rem + 1vw, 2.05rem); }
  .mv-sitio :where(h2), .mv-sitio .mv-titulo-seccion { font-size: var(--mv-texto-2xl); }
  .mv-sitio :where(h3) { font-size: var(--mv-texto-xl); }
  .mv-sitio .mv-bajada { font-size: clamp(1.0625rem, .98rem + .35vw, 1.3rem); color: var(--mv-texto-secundario); max-inline-size: 60ch; }
  .mv-sitio .mv-antetitulo { font-size: var(--mv-texto-sm); font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--mv-enlace); }
  .mv-sitio .mv-texto-pequeno { font-size: var(--mv-texto-sm); }
  .mv-sitio .mv-texto-secundario { color: var(--mv-texto-secundario); }
  .mv-sitio .mv-numeros { font-variant-numeric: tabular-nums; }
}

@layer mv.estructura {
  .mv-sitio .mv-contenedor,
  .mv-contenedor,
  .mgui-vd-home-wrap,
  .mgui-vd-catalog-3col,
  .mgui-vd-pdp-wrap,
  .mgui-vd-pdp-tabs-wrap,
  .mgui-vd-header__inner,
  .mgui-vd-header__nav-inner,
  .mv-sitio .mgui-vd-topbar__inner,
  .mv-sitio .mgui-vd-mainbar__inner,
  .mv-sitio .mgui-vd-subbar__inner {
    width: 100%;
    inline-size: 100%;
    max-width: var(--mv-seccion-ancho, 100%);
    max-inline-size: var(--mv-seccion-ancho, 100%);
    margin-inline: auto;
    padding-inline: clamp(16px, 2.5vw, 36px);
    box-sizing: border-box;
  }
  .mv-sitio .mv-seccion,
  .mgui-studio-sec {
    width: 100%;
    max-width: var(--mv-seccion-ancho, var(--mg-sec-max-width, 100%));
    margin-inline: auto;
    padding-block: clamp(0.65rem, 1.5vw, 1.15rem);
    box-sizing: border-box;
  }
  .mv-sitio main > .mv-seccion:first-child { padding-block-start: 0.45rem; }
  .mv-sitio .mv-pila { display: flex; flex-direction: column; gap: var(--mv-espacio-4); }
  .mv-sitio .mv-fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mv-espacio-3); }
  .mv-sitio .mv-repartir { justify-content: space-between; }
  .mv-sitio .mv-grilla,
  .mv-grilla,
  .mgui-vd-pgrid-4 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
    width: 100%;
    max-width: 100%;
    gap: 16px;
  }
  .mv-sitio .mv-dos-columnas { display: grid; gap: var(--mv-espacio-8); width: 100%; }
  .mv-sitio .mv-tres-columnas,
  .mv-tres-columnas,
  .mgui-vd-trio-grid3,
  .mgui-vd-home-trio,
  .mgui-vd-stores-grid,
  .mgui-studio-grid--3,
  [data-disposicion="3_col"],
  [data-grid-layout="3_col"],
  .mgui-vd-benefits-grid {
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    box-sizing: border-box;
  }
  @media (min-width: 60.0625rem) {
    .mv-sitio .mv-tres-columnas,
    .mv-tres-columnas,
    .mgui-vd-trio-grid3,
    .mgui-vd-home-trio,
    .mgui-vd-stores-grid,
    .mgui-studio-grid--3,
    [data-disposicion="3_col"],
    [data-grid-layout="3_col"],
    .mgui-vd-benefits-grid {
      width: 100%;
      max-width: 100%;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }
  }
  .mv-sitio .mv-banda { background: var(--mv-marino); color: #FFF; padding-block: .6rem; font-size: var(--mv-texto-sm); }
  .mv-sitio .mv-cabecera { background: var(--mv-superficie); border-block-end: 1px solid var(--mv-linea); position: relative; z-index: var(--mv-z-cabecera); }
  .mv-sitio .mv-cabecera-interior { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; padding-block: .75rem; }
  .mv-sitio .mv-marca { display: inline-flex; flex: 0 0 auto; align-items: center; max-inline-size: 17rem; }
  .mv-sitio .mv-marca img { inline-size: 17rem; block-size: 3.4rem; object-fit: contain; }
  .mv-sitio .mv-buscador { display: flex; flex: 1 1 22rem; gap: .5rem; align-items: center; background: #FFFFFF; border-radius: 4px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .2); padding-inline: .5rem .25rem; }
  .mv-sitio .mv-buscador .mv-campo { min-inline-size: 0; border: 0; box-shadow: none; background: transparent; }
  .mv-sitio .mv-cp-pill, .mv-sitio .mgui-vd-cp-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); color: inherit; font-size: 0.95rem; text-decoration: none; transition: border-color .15s ease, background-color .15s ease; }
  .mv-sitio .mv-cp-pill:hover, .mv-sitio .mgui-vd-cp-pill:hover { border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .14); }
  .mv-sitio .mv-navegacion { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; padding-block: .55rem; }
  .mv-sitio .mv-navegacion a { padding-block: .4rem; font-size: var(--mv-texto-sm); color: var(--mv-texto); text-decoration: none; }
  .mv-sitio .mv-navegacion a[aria-current="page"] { color: var(--mv-enlace); font-weight: 750; box-shadow: inset 0 -3px var(--mv-azul); }
  /* Cabecera institucional en niveles estilo MercadoLibre + MercadoVentas (Ultra Compacta) */
  .mv-sitio .mgui-vd-header3,
  .mgui-vd-header3 {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    background: var(--mv-superficie) !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .12) !important;
    position: relative !important;
    z-index: 40 !important;
  }
  .mv-sitio .mgui-vd-header3--amarillo .mgui-vd-mainbar { background: var(--mv-amarillo-ml) !important; border-bottom: 1px solid rgba(0, 0, 0, .08) !important; }
  .mv-sitio .mgui-vd-header3--amarillo .mgui-vd-subbar { background: var(--mv-amarillo-ml) !important; color: #333333 !important; border-bottom: 1px solid rgba(0, 0, 0, .08) !important; }
  .mv-sitio .mgui-vd-topbar,
  .mgui-vd-topbar {
    background: #071638 !important;
    color: #E2ECFF !important;
    font-size: 0.71rem !important;
    line-height: 1.15 !important;
    padding-block: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  }
  .mv-sitio .mgui-vd-topbar__inner,
  .mgui-vd-topbar__inner {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.2rem 0.65rem !important;
    padding-block: 0.1rem !important;
    min-height: 1.35rem !important;
  }
  .mv-sitio .mgui-vd-topbar__group,
  .mgui-vd-topbar__group,
  .mv-studio-header-top__left,
  .mv-studio-header-top__right {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.2rem 0.5rem !important;
  }
  .mv-sitio .mgui-vd-topbar__item,
  .mgui-vd-topbar__item,
  .mv-studio-header-top .mgui-vd-topbar__link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    color: #E2ECFF !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 0.71rem !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }
  .mv-sitio .mgui-vd-topbar__item:hover,
  .mgui-vd-topbar__item:hover { color: #FFFFFF !important; text-decoration: underline !important; }
  .mv-sitio .mgui-vd-topbar__sep,
  .mgui-vd-topbar__sep { color: rgba(255, 255, 255, 0.24) !important; user-select: none !important; font-size: 0.68rem !important; }
  .mv-sitio .mgui-vd-mainbar,
  .mgui-vd-mainbar {
    background: linear-gradient(90deg, #0F319E 0%, #1647D8 55%, #1E56F0 100%) !important;
    color: #FFFFFF !important;
    padding-block: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
  }
  .mv-sitio .mgui-vd-mainbar__inner,
  .mgui-vd-mainbar__inner {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.3rem 0.55rem !important;
    padding-block: 0.2rem !important;
    min-height: 2.05rem !important;
  }
  .mv-sitio .mgui-vd-brand,
  .mgui-vd-brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    text-decoration: none !important;
    color: #FFFFFF !important;
    flex-shrink: 0 !important;
  }
  .mv-sitio .mgui-vd-brand__img,
  .mgui-vd-brand__img,
  .mv-studio-header-brand .mgui-vd-brand__logo-h {
    height: 1.55rem !important;
    block-size: 1.55rem !important;
    width: auto !important;
    inline-size: auto !important;
    max-width: 8.8rem !important;
    object-fit: contain !important;
    background: #FFFFFF !important;
    padding: 0.08rem 0.32rem !important;
    border-radius: 0.32rem !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.18) !important;
  }
  .mv-sitio .mgui-vd-brand__dom,
  .mgui-vd-brand__dom {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: #FFB533 !important;
    margin-left: -0.1rem !important;
    line-height: 1 !important;
  }
  .mv-sitio .mgui-vd-catmenu,
  .mgui-vd-catmenu {
    position: relative !important;
    flex: 0 0 auto !important;
  }
  .mv-sitio .mgui-vd-catmenu__btn,
  .mgui-vd-catmenu__btn,
  .mv-studio-header-main .mgui-vd-cat-trigger {
    list-style: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.28rem !important;
    height: 1.65rem !important;
    block-size: 1.65rem !important;
    padding: 0 0.52rem !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    border-radius: 0.35rem !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
    font-size: 0.73rem !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    user-select: none !important;
    box-shadow: none !important;
    white-space: nowrap !important;
  }
  .mv-sitio .mgui-vd-catmenu__btn:hover,
  .mgui-vd-catmenu__btn:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    color: #FFE600 !important;
  }
  .mv-sitio .mgui-vd-searchbar,
  .mgui-vd-searchbar {
    flex: 1 1 14rem !important;
    display: flex !important;
    align-items: center !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 0.35rem !important;
    overflow: hidden !important;
    height: 1.65rem !important;
    block-size: 1.65rem !important;
    padding: 0 !important;
    gap: 0.2rem !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .16) !important;
  }
  .mv-sitio .mgui-vd-searchbar__icon,
  .mgui-vd-searchbar__icon {
    padding-left: 0.5rem !important;
    color: #64748B !important;
    font-size: 0.76rem !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  .mv-sitio .mgui-vd-searchbar__input,
  .mgui-vd-searchbar__input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0.12rem 0.4rem !important;
    font-size: 0.78rem !important;
    height: 100% !important;
    color: #0F172A !important;
    outline: none !important;
  }
  .mv-sitio .mgui-vd-searchbar__clear,
  .mgui-vd-searchbar__clear {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1.35rem !important;
    height: 1.35rem !important;
    padding: 0 !important;
    color: #64748B !important;
    text-decoration: none !important;
    font-size: 0.74rem !important;
  }
  .mv-sitio .mgui-vd-searchbar__submit,
  .mgui-vd-searchbar__submit,
  .mv-studio-header-search .mgui-vd-searchbar__btn {
    height: 100% !important;
    block-size: 100% !important;
    min-inline-size: 2rem !important;
    padding: 0 0.55rem !important;
    border: 0 !important;
    border-inline-start: 1px solid #E2E8F0 !important;
    border-radius: 0 !important;
    background: #F8FAFC !important;
    color: #0A2E8A !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
  }
  .mv-sitio .mgui-vd-searchbar__submit:hover,
  .mgui-vd-searchbar__submit:hover { background: #EFF6FF !important; color: #081F5C !important; }
  .mv-sitio .mgui-vd-hdr-actions,
  .mgui-vd-hdr-actions,
  .mv-studio-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0.15rem !important;
    flex: 0 0 auto !important;
  }
  .mv-sitio .mgui-vd-hdr-action,
  .mgui-vd-hdr-action,
  .mv-studio-header-actions .mgui-vd-action-btn,
  .mv-studio-header-actions .mgui-vd-cart-btn {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.22rem !important;
    padding: 0.15rem 0.38rem !important;
    min-height: 1.5rem !important;
    font-size: 0.72rem !important;
    line-height: 1.1 !important;
    font-weight: 600 !important;
    border-radius: 0.3rem !important;
    white-space: nowrap !important;
  }
  .mv-sitio .mgui-vd-hdr-action--divider,
  .mgui-vd-hdr-action--divider {
    border-inline-start: 1px solid rgba(255, 255, 255, 0.16) !important;
  }
  .mv-sitio .mgui-vd-hdr-action__icon,
  .mgui-vd-hdr-action__icon {
    font-size: 0.85rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.15rem !important;
    position: relative !important;
  }
  .mv-sitio .mgui-vd-hdr-action__badge,
  .mgui-vd-hdr-action__badge {
    position: static !important;
    min-inline-size: 0.95rem !important;
    block-size: 0.95rem !important;
    padding-inline: 0.22rem !important;
    border-radius: 999px !important;
    font-size: 0.63rem !important;
    line-height: 1 !important;
    border: 0 !important;
  }
  .mv-sitio .mgui-vd-subbar,
  .mgui-vd-subbar {
    background: #081C48 !important;
    color: #E2ECFF !important;
    padding-block: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    font-size: 0.73rem !important;
    line-height: 1.15 !important;
  }
  .mv-sitio .mgui-vd-subbar__inner,
  .mgui-vd-subbar__inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.2rem 0.5rem;
    padding-block: 0.1rem;
    min-height: 1.35rem;
  }
  .mv-sitio .mgui-vd-subbar__nav,
  .mgui-vd-subbar__nav,
  .mv-studio-header-subnav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.12rem 0.25rem;
  }
  .mv-sitio .mgui-vd-subbar__link,
  .mgui-vd-subbar__link,
  .mv-studio-header-subnav .mgui-vd-subnav__link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.22rem !important;
    padding: 0.1rem 0.4rem !important;
    border-radius: 0.25rem !important;
    color: #E2ECFF !important;
    text-decoration: none !important;
    font-size: 0.73rem !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    transition: background-color 140ms ease, color 140ms ease !important;
    white-space: nowrap !important;
  }
  .mv-sitio .mgui-vd-subbar__link:hover,
  .mv-sitio .mgui-vd-subbar__link--activo,
  .mgui-vd-subbar__link:hover,
  .mgui-vd-subbar__link--activo {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #FFFFFF !important;
  }
  .mv-sitio .mv-portada { color: #FFF; background: radial-gradient(ellipse at 92% 18%, rgb(0 163 255 / .28), transparent 52%), linear-gradient(115deg, var(--mv-marino), var(--mv-cobalto)); border-radius: var(--mv-radio-xl); overflow: clip; }
  .mv-sitio .mv-portada-interior { display: grid; gap: 1rem; align-items: center; padding: clamp(1.25rem, 4vw, 3rem); }
  .mv-sitio .mv-portada .mv-antetitulo { color: #FFD18A; }
  .mv-sitio .mv-portada .mv-bajada { color: #CCDAF0; }
  .mv-sitio .mv-portada .mv-destacado { color: #FFD18A; }
  .mv-sitio .mv-portada-ilustracion { inline-size: 100%; max-block-size: 31rem; object-fit: contain; }
  .mv-sitio .mv-acciones { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
  .mv-sitio .mv-panel { border: 1px solid rgba(0, 0, 0, .08); border-radius: 8px; background: var(--mv-superficie); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .12); padding: clamp(1rem, 2.5vw, 1.5rem); }
  .mv-sitio .mv-migas { display: flex; flex-wrap: wrap; gap: .5rem; font-size: var(--mv-texto-sm); list-style: none; padding: 0; }
  .mv-sitio .mv-migas li + li::before { content: "/"; color: var(--mv-texto-secundario); margin-inline-end: .5rem; }
  /* Pie institucional de MercadoVentas.com.ar (Ultra Compacto sin resignar información) */
  .mv-sitio .mv-pie,
  .mv-sitio .mv-pie.mv-pie--compacto,
  .mv-pie.mv-pie--compacto {
    padding-block: 0.28rem 0.32rem !important;
    background: var(--mv-marino) !important;
    color: #FFF !important;
    margin-block-start: 0.5rem !important;
    font-size: 0.71rem !important;
    line-height: 1.2 !important;
    border-block-start: 1px solid rgba(255, 255, 255, 0.12) !important;
  }
  .mv-sitio .mv-pie a,
  .mv-pie.mv-pie--compacto a { color: #CCDAF0 !important; text-decoration: none !important; white-space: nowrap !important; }
  .mv-sitio .mv-pie a:hover,
  .mv-pie.mv-pie--compacto a:hover { color: #FFF !important; text-decoration: underline !important; }
  .mv-sitio .mv-pie-grilla,
  .mv-pie-grilla {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.22rem 0.85rem !important;
  }
  .mv-sitio .mv-pie-lista { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .2rem .55rem; font-size: 0.95rem; }
  .mv-sitio .mv-pie-enlaces-fila,
  .mv-pie-enlaces-fila {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.15rem 0.48rem !important;
    margin: 0 !important;
    font-size: 0.71rem !important;
  }
  .mv-sitio .mv-pie-col-marca,
  .mv-sitio .mv-pie-nav,
  .mv-sitio .mv-pie-col-seguridad,
  .mv-pie-col-marca,
  .mv-pie-nav,
  .mv-pie-col-seguridad {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.18rem 0.42rem !important;
    margin: 0 !important;
  }
  .mv-sitio .mv-pie .mv-marca,
  .mv-pie .mv-marca {
    display: inline-flex !important;
    align-items: center !important;
    max-inline-size: none !important;
  }
  .mv-sitio .mv-pie .mv-marca img,
  .mv-pie .mv-marca img,
  .mv-studio-footer-shell img {
    inline-size: auto !important;
    width: auto !important;
    block-size: 1.2rem !important;
    height: 1.2rem !important;
    max-width: 7.2rem !important;
    object-fit: contain !important;
  }
  .mv-sitio .mv-pie-col-marca p,
  .mv-sitio .mv-pie-col-seguridad p,
  .mv-pie-col-marca p,
  .mv-pie-col-seguridad p {
    margin: 0 !important;
    font-size: 0.7rem !important;
    color: #94A3B8 !important;
    line-height: 1.15 !important;
  }
  .mv-sitio .mv-pie-nav > strong,
  .mv-sitio .mv-pie-col-seguridad > strong,
  .mv-pie-nav > strong,
  .mv-pie-col-seguridad > strong {
    font-size: 0.71rem !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    white-space: nowrap !important;
  }
  .mv-sitio .mv-pie .mv-chat-btn-icono,
  .mv-pie .mv-chat-btn-icono {
    padding: 0.08rem 0.38rem !important;
    font-size: 0.68rem !important;
    line-height: 1.1 !important;
    border-radius: 999px !important;
  }
  /* Cabecera y pie del Comparador (/mercadoventas/comparar) ultra compactos */
  .mv-sitio .mv-header {
    background: #081F5C;
    color: #FFFFFF;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }
  .mv-sitio .mv-topbar {
    background: #071638;
    color: #E2ECFF;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .mv-sitio .mv-topbar__inner {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0.12rem 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
  }
  .mv-sitio .mv-topbar__links {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.65rem;
  }
  .mv-sitio .mv-topbar__links a {
    color: #E2ECFF;
    text-decoration: none;
    font-weight: 500;
  }
  .mv-sitio .mv-topbar__links a:hover {
    color: #FFFFFF;
    text-decoration: underline;
  }
  .mv-sitio .mv-navbar {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0.22rem 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem 0.65rem;
  }
  .mv-sitio .mv-brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
  }
  .mv-sitio .mv-brand__logo {
    height: 1.55rem !important;
    width: auto !important;
    background: #FFFFFF;
    padding: 0.08rem 0.32rem;
    border-radius: 0.32rem;
    object-fit: contain;
  }
  .mv-sitio .mv-search {
    flex: 1 1 16rem;
    display: flex;
    align-items: center;
    height: 1.65rem;
    background: #FFFFFF;
    border-radius: 0.35rem;
    overflow: hidden;
  }
  .mv-sitio .mv-search__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    padding: 0.12rem 0.5rem;
    font-size: 0.95rem;
    color: #0F172A;
    outline: none;
  }
  .mv-sitio .mv-search__btn {
    height: 100%;
    border: 0;
    border-inline-start: 1px solid #E2E8F0;
    background: #EFF6FF;
    color: #081F5C;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0 0.65rem;
    cursor: pointer;
    white-space: nowrap;
  }
  .mv-sitio .mv-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
  }
  .mv-sitio .mv-action-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.14rem 0.48rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
  }
  .mv-sitio .mv-action-pill--accent {
    background: #FFB533;
    color: #081F5C;
    font-weight: 700;
  }
  .mv-sitio .mv-footer {
    background: var(--mv-marino);
    color: #FFFFFF;
    padding-block: 0.3rem 0.35rem;
    margin-block-start: 0.5rem;
    font-size: 0.95rem;
    line-height: 1.2;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  .mv-sitio .mv-footer__inner {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 0.85rem;
  }
  .mv-sitio .mv-footer__brand,
  .mv-sitio .mv-footer__inner > div {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.45rem;
  }
  .mv-sitio .mv-footer__brand img {
    height: 1.2rem !important;
    width: auto !important;
    object-fit: contain;
  }
  .mv-sitio .mv-footer__brand p,
  .mv-sitio .mv-footer__inner h4 {
    margin: 0;
    font-size: 0.95rem;
  }
  .mv-sitio .mv-footer__brand p {
    color: #94A3B8;
  }
  .mv-sitio .mv-footer__inner ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.5rem;
  }
  .mv-sitio .mv-footer__inner li {
    color: #CBD5E1;
    font-size: 0.95rem;
  }
  .mv-sitio .mv-footer__inner a {
    color: #CCDAF0;
    text-decoration: none;
  }
  .mv-sitio .mv-footer__inner a:hover {
    color: #FFFFFF;
    text-decoration: underline;
  }
  .mv-sitio .mv-chat-widget { position: fixed; inset-block-end: 1.1rem; inset-inline-end: 1.1rem; z-index: 95; display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; max-inline-size: calc(100vw - 1.5rem); }
  .mv-sitio .mv-chat-fab { display: inline-flex; align-items: center; gap: .5rem; padding: .65rem 1.1rem; border-radius: var(--mv-radio-pildora); border: 2px solid #FFF; background: var(--mv-azul); color: #FFF; font-weight: 750; font-size: var(--mv-texto-sm); box-shadow: var(--mv-sombra-lg); }
  .mv-sitio .mv-chat-ventana { inline-size: min(23.5rem, calc(100vw - 1.5rem)); max-block-size: min(34rem, calc(100dvh - 5.5rem)); display: flex; flex-direction: column; border: 1px solid var(--mv-linea); border-radius: var(--mv-radio-lg); background: var(--mv-superficie); color: var(--mv-texto); box-shadow: var(--mv-sombra-lg); overflow: hidden; }
  .mv-sitio .mv-chat-ventana[hidden], .mv-sitio .mv-chat-ventana.mv-chat-ventana--oculta, .mv-sitio .mv-chat-ventana[data-mv-chat-abierta="0"] { display: none; }
  .mv-sitio .mv-chat-cabecera { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem .95rem; background: var(--mv-marino); color: #FFF; font-size: var(--mv-texto-sm); }
  .mv-sitio .mv-chat-cabecera-acciones { display: inline-flex; align-items: center; gap: .35rem; }
  .mv-sitio .mv-chat-btn-icono { border: 1px solid rgb(255 255 255 / .3); background: rgb(255 255 255 / .12); color: #FFF; border-radius: var(--mv-radio-xs); padding: .2rem .5rem; font-size: var(--mv-texto-xs); font-weight: 700; }
  .mv-sitio .mv-chat-cola-banner { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .45rem .85rem; background: var(--mv-hielo); border-block-end: 1px solid var(--mv-linea); font-size: var(--mv-texto-xs); color: var(--mv-marino); font-weight: 650; }
  .mv-sitio .mv-chat-mensajes { flex: 1 1 auto; min-block-size: 12rem; max-block-size: 18rem; overflow-y: auto; padding: .75rem; display: flex; flex-direction: column; gap: .55rem; background: var(--mv-fondo); }
  .mv-sitio .mv-chat-msg { padding: .55rem .75rem; border-radius: var(--mv-radio-md); font-size: var(--mv-texto-sm); max-inline-size: 88%; line-height: 1.4; }
  .mv-sitio .mv-chat-msg--agente { align-self: flex-start; background: var(--mv-superficie); border: 1px solid var(--mv-linea); color: var(--mv-texto); }
  .mv-sitio .mv-chat-msg--usuario { align-self: flex-end; background: var(--mv-azul); color: #FFF; }
  .mv-sitio .mv-chat-msg--sistema { align-self: center; max-inline-size: 96%; background: #FEF3C7; border: 1px solid #F59E0B; color: #78350F; font-size: var(--mv-texto-xs); text-align: center; }
  .mv-sitio .mv-chat-cuerpo-form { padding: .75rem; border-block-start: 1px solid var(--mv-linea); background: var(--mv-superficie); display: flex; flex-direction: column; gap: .5rem; }
  .mv-sitio .mv-guia-grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1rem; }
  .mv-sitio .mv-guia-paso { display: flex; flex-direction: column; gap: .45rem; padding: 1.1rem; border: 1px solid var(--mv-linea); border-radius: var(--mv-radio-md); background: var(--mv-superficie); }
  .mv-sitio .mv-guia-numero { display: inline-flex; align-items: center; justify-content: center; inline-size: 1.85rem; block-size: 1.85rem; border-radius: 999px; background: var(--mv-azul); color: #FFF; font-weight: 800; font-size: var(--mv-texto-sm); }
  .mv-sitio .mv-layout-catalogo { display: grid; gap: var(--mv-espacio-6); align-items: start; }
  .mv-sitio .mv-cinta-confianza { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1rem; padding: 1.15rem 1.35rem; background: var(--mv-superficie); border: 1px solid var(--mv-linea); border-radius: var(--mv-radio-lg); box-shadow: var(--mv-sombra-sm); }
  .mv-sitio .mv-cinta-item { display: flex; align-items: flex-start; gap: .75rem; min-inline-size: 0; }
  .mv-sitio .mv-cinta-icono { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--mv-radio-sm); background: var(--mv-hielo); color: var(--mv-azul); flex: 0 0 auto; }
  @media (min-width: 56rem) {
    .mv-sitio .mv-layout-catalogo { grid-template-columns: minmax(15rem, 17.5rem) minmax(0, 1fr); }
  }
  @media (min-width: 48rem) {
    .mv-sitio .mv-dos-columnas { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
    .mv-sitio .mv-portada-interior { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
  }
  @media (max-width: 35.99rem) {
    .mv-sitio .mv-buscador { order: 3; flex-basis: 100%; }
    .mv-sitio .mv-marca { max-inline-size: 13.5rem; }
    .mv-sitio .mv-marca img { inline-size: 13.5rem; block-size: 2.8rem; }
    .mv-sitio .mv-acciones > .mv-boton { flex: 1 1 100%; }
    .mv-sitio .mv-portada-ilustracion { max-block-size: 17rem; }
  }
}

@layer mv.controles {
  .mv-sitio .mv-boton { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-block-size: 2.875rem; max-inline-size: 100%; padding: .7rem 1.1rem; border: 1px solid transparent; border-radius: var(--mv-radio-pildora); font-weight: 750; line-height: 1.3; text-align: center; text-decoration: none; overflow-wrap: anywhere; transition: background-color var(--mv-transicion), color var(--mv-transicion), box-shadow var(--mv-transicion); }
  .mv-sitio .mv-boton--comprar { color: var(--mv-accion-texto); background: var(--mv-accion); border-color: var(--mv-accion-borde); }
  .mv-sitio .mv-boton--comprar:hover { color: var(--mv-accion-resaltada-texto); background: var(--mv-accion-resaltada); }
  .mv-sitio .mv-boton--primario { color: #FFF; background: var(--mv-explorar); border-color: var(--mv-explorar); }
  .mv-sitio .mv-boton--primario:hover { background: var(--mv-explorar-resaltado); border-color: var(--mv-explorar-resaltado); }
  .mv-sitio .mv-boton--secundario { background: var(--mv-superficie); color: var(--mv-enlace); border-color: var(--mv-enlace); }
  .mv-sitio .mv-boton--secundario:hover { background: var(--mv-hielo); }
  .mv-sitio .mv-boton--inverso { background: transparent; color: #FFF; border-color: #BACAE1; }
  .mv-sitio .mv-boton--inverso:hover { background: #22375F; }
  .mv-sitio .mv-boton--discreto { color: var(--mv-enlace); background: transparent; text-decoration: underline; text-underline-offset: .2em; }
  .mv-sitio .mv-boton--peligro { color: #FFF; background: var(--mv-error); border-color: var(--mv-error); }
  .mv-sitio .mv-boton--pequeno { min-block-size: 2.75rem; font-size: var(--mv-texto-sm); padding: .55rem .9rem; }
  .mv-sitio .mv-boton--ancho { inline-size: 100%; }
  .mv-sitio .mv-boton:disabled, .mv-sitio .mv-boton[aria-disabled="true"] { color: #52617A; background: #E1E7EF; border-color: #AAB7CA; box-shadow: none; cursor: not-allowed; }
  .mv-sitio .mv-boton[aria-busy="true"] { cursor: progress; }
  /* aria-disabled no bloquea eventos por sí mismo: usar disabled en button o lógica accesible en la app. */
  .mv-sitio .mv-icono { inline-size: 1.4rem; block-size: 1.4rem; flex: 0 0 auto; vertical-align: middle; }
  .mv-sitio .mv-boton-icono { min-inline-size: 2.875rem; min-block-size: 2.875rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--mv-borde-control); border-radius: var(--mv-radio-sm); background: var(--mv-superficie); color: var(--mv-texto); }
  .mv-sitio .mv-etiqueta { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: var(--mv-radio-pildora); background: var(--mv-hielo); color: var(--mv-enlace); font-size: var(--mv-texto-xs); font-weight: 750; }
  .mv-sitio .mv-etiqueta--mayorista { color: #071B52; background: #EAF4FF; border: 1px solid #AAC9FB; }
  .mv-sitio .mv-etiqueta--promocion { color: #844100; background: #FFF2E5; border: 1px solid #D97725; }
  .mv-sitio .mv-etiqueta--exito { color: #13724B; background: #E8F6EF; }
  .mv-sitio .mv-etiqueta--error { color: #B42318; background: #FFF0ED; }
  .mv-sitio .mv-acordeon { border-block-end: 1px solid var(--mv-linea); padding-block: 1rem; }
  .mv-sitio .mv-acordeon summary { min-block-size: 2.75rem; cursor: pointer; font-weight: 700; padding: .5rem 0; }
  .mv-sitio .mv-acordeon[open] > :not(summary) { margin-block-start: .75rem; }
  .mv-sitio .mv-paginacion { display: flex; flex-wrap: wrap; gap: .5rem; }
  .mv-sitio .mv-paginacion [aria-current="page"] { background: var(--mv-azul); color: #FFF; }
}

@layer mv.formularios {
  .mv-sitio .mv-grupo-campo { display: flex; flex-direction: column; gap: .4rem; min-inline-size: 0; }
  .mv-sitio .mv-etiqueta-campo { font-weight: 650; color: var(--mv-texto); }
  .mv-sitio .mv-campo { inline-size: 100%; min-block-size: 2.875rem; padding: .65rem .85rem; color: var(--mv-texto); background: var(--mv-superficie); border: 1px solid var(--mv-borde-control); border-radius: var(--mv-radio-sm); font-size: 1rem; }
  .mv-sitio .mv-campo::placeholder { color: var(--mv-texto-secundario); opacity: 1; }
  .mv-sitio textarea.mv-campo { min-block-size: 7rem; resize: vertical; }
  .mv-sitio .mv-campo[aria-invalid="true"] { border: 2px solid var(--mv-error); }
  .mv-sitio .mv-ayuda-campo { color: var(--mv-texto-secundario); font-size: var(--mv-texto-sm); }
  .mv-sitio .mv-error-campo { color: var(--mv-error); font-size: var(--mv-texto-sm); font-weight: 600; }
  .mv-sitio .mv-casilla { display: flex; gap: .7rem; align-items: flex-start; min-block-size: 2.75rem; padding-block: .5rem; }
  .mv-sitio .mv-casilla input { inline-size: 1.2rem; block-size: 1.2rem; margin-block-start: .2rem; accent-color: var(--mv-azul); flex: 0 0 auto; }
  .mv-sitio .mv-selector-cantidad { display: inline-flex; align-items: stretch; gap: .4rem; max-inline-size: 100%; }
  .mv-sitio .mv-selector-cantidad .mv-campo { inline-size: 6rem; text-align: center; font-variant-numeric: tabular-nums; }
  .mv-sitio .mv-filtros { display: grid; gap: 1rem; }
  .mv-sitio fieldset.mv-panel { margin: 0; min-inline-size: 0; }
  .mv-sitio fieldset.mv-panel legend { font-weight: 700; padding-inline: .4rem; }
}

@layer mv.comercio {
  /* Tarjeta de producto estilo MercadoLibre + Insignia B2B MercadoVentas */
  .mv-sitio .mv-producto,
  .mv-sitio .mgui-vd-pcard {
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 6px;
    background: #FFFFFF;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .12);
    transition: box-shadow .18s ease, transform .18s ease;
  }
  .mv-sitio .mv-producto:hover,
  .mv-sitio .mgui-vd-pcard:hover {
    box-shadow: 0 7px 16px 0 rgba(0, 0, 0, .15);
    transform: translateY(-2px);
  }
  .mv-sitio .mv-producto-imagen,
  .mv-sitio .mgui-vd-pcard__media {
    block-size: 224px;
    min-block-size: 224px;
    max-block-size: 224px;
    inline-size: 100%;
    object-fit: contain;
    padding: .85rem;
    background: #FFFFFF;
    border-block-end: 1px solid #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .mv-sitio .mgui-vd-pcard__img {
    inline-size: 100%;
    block-size: 100%;
    max-block-size: 196px;
    object-fit: contain;
    background: #FFFFFF;
  }
  .mv-sitio .mv-producto-cuerpo,
  .mv-sitio .mgui-vd-pcard__body {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .9rem 1rem .75rem;
    flex: 1;
    background: #FFFFFF;
  }
  .mv-sitio .mv-producto-titulo,
  .mv-sitio .mgui-vd-pcard__title {
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.35;
    color: rgba(0, 0, 0, .9);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .mv-sitio .mgui-vd-pcard__title:hover,
  .mv-sitio .mv-producto-enlace:hover .mv-producto-titulo {
    color: #3483FA;
    text-decoration: none;
  }
  .mv-sitio .mv-producto-cuerpo > .mv-boton:last-child { margin-block-start: auto; }
  .mv-sitio .mv-precio,
  .mv-sitio .mgui-vd-pcard__price {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.15;
    color: rgba(0, 0, 0, .9);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
  }
  .mv-sitio .mv-precio-unidad { font-size: var(--mv-texto-sm); font-weight: 400; color: var(--mv-texto-secundario); letter-spacing: normal; }
  .mv-sitio .mv-precio-anterior,
  .mv-sitio .mgui-vd-pcard__old {
    color: rgba(0, 0, 0, .55);
    font-size: 0.95rem;
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
  }
  .mv-sitio .mgui-vd-pcard__discount,
  .mv-sitio .mv-ml-price-off {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: #00A650;
    font-size: 1.05rem;
    font-weight: 600;
  }
  .mv-sitio .mgui-vd-pcard__cuotas,
  .mv-sitio .mv-ml-cuotas-verde {
    color: #00A650;
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.25;
  }
  .mv-sitio .mgui-vd-pcard__ship,
  .mv-sitio .mv-ml-envio-verde,
  .mv-sitio .mv-ml-badge-full {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: #00A650;
    font-size: 1.05rem;
    font-weight: 700;
  }
  .mv-sitio .mgui-vd-pcard__b2b,
  .mv-sitio .mv-badge-mayorista {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .35rem;
    margin: 0 .75rem .5rem;
    padding: .42rem .65rem;
    border-radius: 4px;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    color: #0A2E8A;
    font-size: 0.95rem;
    font-weight: 650;
    text-decoration: none;
  }
  .mv-sitio .mgui-vd-pcard__b2b:hover {
    background: #DBEAFE;
    border-color: #93C5FD;
  }
  .mv-sitio .mgui-vd-pcard__b2b-discount {
    color: #00A650;
    font-weight: 800;
    white-space: nowrap;
  }
  .mv-sitio .mgui-vd-pcard__compare,
  .mv-sitio .mv-enlace-comparar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    margin: 0 .75rem .75rem;
    padding: .38rem .65rem;
    border-radius: 4px;
    border: 1px solid #E2E8F0;
    background: #F8FAFC;
    color: #3483FA;
    font-size: 0.95rem;
    font-weight: 650;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
  }
  .mv-sitio .mgui-vd-pcard__compare:hover,
  .mv-sitio .mv-enlace-comparar:hover {
    background: #EFF6FF;
    border-color: #3483FA;
  }

  .mv-sitio .mv-tabla-contenedor { overflow-x: auto; max-inline-size: 100%; border: 1px solid var(--mv-linea); border-radius: var(--mv-radio-sm); }
  .mv-sitio .mv-tabla { inline-size: 100%; border-collapse: collapse; font-size: var(--mv-texto-sm); }
  .mv-sitio .mv-tabla caption { text-align: start; font-weight: 700; padding: .85rem; color: var(--mv-texto); background: var(--mv-superficie); }
  .mv-sitio .mv-tabla :where(th,td) { text-align: start; padding: .85rem; border-block-end: 1px solid var(--mv-linea); vertical-align: top; }
  .mv-sitio .mv-tabla thead { background: var(--mv-hielo); }
  .mv-sitio .mv-tabla tbody tr:last-child :where(th,td) { border-block-end: none; }
  .mv-sitio .mv-tabla .mv-tramo-activo { background: var(--mv-hielo); box-shadow: inset 4px 0 var(--mv-azul); }
  .mv-sitio .mv-tabla .mv-tramo-activo th::after { content: " · elegido"; font-size: 0.95rem; font-weight: 700; }
  .mv-sitio .mv-resumen { display: grid; gap: 1rem; }
  .mv-sitio .mv-resumen-linea { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
  .mv-sitio .mv-resumen-total { border-block-start: 1px solid var(--mv-linea); padding-block-start: 1rem; font-size: var(--mv-texto-xl); font-weight: 800; }
  .mv-sitio .mv-compra-fija { position: sticky; inset-block-end: 0; background: var(--mv-superficie); padding: 1rem; padding-block-end: max(1rem, env(safe-area-inset-bottom)); box-shadow: var(--mv-sombra-md); z-index: var(--mv-z-flotante); }
  .mv-sitio .mv-pasos { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; list-style: none; padding: 0; counter-reset: mv-paso; }
  .mv-sitio .mv-pasos li { counter-increment: mv-paso; display: flex; align-items: center; gap: .5rem; color: var(--mv-texto-secundario); }
  .mv-sitio .mv-pasos li::before { content: counter(mv-paso); display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border: 1px solid var(--mv-borde-control); border-radius: 50%; }
  .mv-sitio .mv-pasos [aria-current="step"] { color: var(--mv-enlace); font-weight: 750; }
  .mv-sitio .mv-pasos [aria-current="step"]::before { background: var(--mv-azul); border-color: var(--mv-azul); color: #FFF; }
  .mv-sitio .mv-categoria { display: flex; gap: .75rem; align-items: center; padding: 1.2rem; border: 1px solid var(--mv-linea); border-radius: var(--mv-radio-md); background: var(--mv-superficie); color: var(--mv-texto); text-decoration: none; font-weight: 700; }
  .mv-sitio .mv-categoria:hover { border-color: var(--mv-azul); background: var(--mv-hielo); }
  .mv-sitio .mv-producto-enlace { color: inherit; text-decoration: none; }
  .mv-sitio .mv-producto-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem; font-size: var(--mv-texto-xs); color: var(--mv-texto-secundario); }
  .mv-sitio .mv-pdp-galeria { display: grid; gap: 1rem; align-content: start; }
  .mv-sitio .mv-pdp-imagen-principal { aspect-ratio: 4 / 3; inline-size: 100%; object-fit: contain; padding: 1.25rem; background: #FFFFFF; border: 1px solid #F5F5F5; border-radius: 8px; }
  .mv-sitio .mv-pdp-miniaturas { display: flex; flex-wrap: wrap; gap: .6rem; }
  .mv-sitio .mv-pdp-miniatura { inline-size: 3.5rem; block-size: 3.5rem; object-fit: contain; padding: .25rem; background: #FFFFFF; border: 1px solid #E5E5E5; border-radius: 4px; cursor: pointer; }
  .mv-sitio .mv-tienda-portada { border: 1px solid var(--mv-linea); border-radius: var(--mv-radio-xl); background: var(--mv-superficie); overflow: clip; box-shadow: var(--mv-sombra-sm); }
  .mv-sitio .mv-tienda-banner { inline-size: 100%; block-size: clamp(9rem, 20vw, 14rem); object-fit: cover; background: linear-gradient(115deg, var(--mv-marino), var(--mv-cobalto)); }
  .mv-sitio .mv-tienda-cuerpo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(1rem, 2.5vw, 1.75rem); }
  /* Armonización de bloques Studio (.mgui-vd-*) dentro del alcance aislado .mv-sitio */
  .mv-sitio {
    --mg-color-accion: var(--mv-azul);
    --mg-color-marca-profunda: var(--mv-marino);
    --mg-color-superficie-base: var(--mv-fondo);
    --mg-color-superficie-tarjeta: var(--mv-superficie);
    --mg-color-texto-primario: var(--mv-texto);
    --mg-color-texto-secundario: var(--mv-texto-secundario);
  }
  .mv-sitio .mgui-vd-shell { background: var(--mv-fondo); color: var(--mv-texto); max-inline-size: 100%; overflow-x: clip; }
  .mv-sitio .mgui-vd-hero { background: radial-gradient(ellipse at 92% 18%, rgb(0 163 255 / .28), transparent 52%), linear-gradient(115deg, var(--mv-marino), var(--mv-cobalto)); color: #FFF; border-color: rgba(255, 255, 255, .16); }
  .mv-sitio .mgui-vd-btn--primario { background: var(--mv-accion); color: var(--mv-accion-texto); border: 1px solid var(--mv-accion-borde); font-weight: 750; }
  .mv-sitio .mgui-vd-btn--primario:hover { background: var(--mv-accion-resaltada); color: var(--mv-accion-resaltada-texto); }
  .mv-sitio .mgui-vd-btn--fantasma { background: transparent; color: #FFF; border: 1px solid #BACAE1; }
  .mv-sitio .mgui-vd-btn--fantasma:hover { background: #22375F; }
  .mv-sitio .mgui-vd-card { border-color: var(--mv-linea); background: var(--mv-superficie); box-shadow: var(--mv-sombra-sm); }
  .mv-sitio .mgui-vd-card__precio { color: var(--mv-texto); font-variant-numeric: tabular-nums; }
  .mv-sitio .mgui-vd-card__badge--mayorista { color: var(--mv-marino); background: var(--mv-hielo); border: 1px solid #AAC9FB; }
  .mv-sitio .mv-fav-form { margin-inline-start: auto; display: inline-flex; }

  /* Onboarding de Compradores, OTP, Cámara en vivo, Mapa de Domicilio y Portal Comprador */
  .mv-sitio .mv-onboard-grid { display: grid; gap: var(--mv-espacio-6); align-items: start; }
  @media (min-width: 56rem) {
    .mv-sitio .mv-onboard-grid { grid-template-columns: minmax(16rem, 21rem) minmax(0, 1fr); }
  }
  .mv-sitio .mv-onboard-steps { display: flex; flex-direction: column; gap: var(--mv-espacio-3); list-style: none; padding: 0; margin: 0; }
  .mv-sitio .mv-onboard-step { display: flex; align-items: flex-start; gap: var(--mv-espacio-3); padding: var(--mv-espacio-3) var(--mv-espacio-4); border: 1px solid var(--mv-linea); border-radius: var(--mv-radio-md); background: var(--mv-superficie); color: var(--mv-texto-secundario); text-decoration: none; transition: border-color var(--mv-transicion), background-color var(--mv-transicion); }
  .mv-sitio .mv-onboard-step--activo { border-color: var(--mv-azul); background: var(--mv-hielo); color: var(--mv-texto); font-weight: 700; box-shadow: inset 4px 0 var(--mv-azul); }
  .mv-sitio .mv-onboard-step--completo { border-color: var(--mv-exito); background: var(--mv-exito-fondo); color: var(--mv-exito); }
  .mv-sitio .mv-otp-grupo { display: flex; flex-wrap: wrap; gap: var(--mv-espacio-2); align-items: center; justify-content: flex-start; }
  .mv-sitio .mv-otp-casilla { inline-size: 3.1rem; block-size: 3.4rem; text-align: center; font-size: var(--mv-texto-xl); font-weight: 800; font-variant-numeric: tabular-nums; border: 2px solid var(--mv-borde-control); border-radius: var(--mv-radio-sm); background: var(--mv-superficie); color: var(--mv-texto); }
  .mv-sitio .mv-otp-casilla:focus { border-color: var(--mv-azul); background: var(--mv-hielo); }
  .mv-sitio .mv-camara-visor { display: grid; place-items: center; gap: var(--mv-espacio-3); padding: var(--mv-espacio-4); border: 2px dashed var(--mv-borde-control); border-radius: var(--mv-radio-lg); background: var(--mv-fondo); overflow: clip; min-block-size: 14rem; }
  .mv-sitio .mv-camara-visor :where(video, img) { max-inline-size: 100%; max-block-size: 20rem; border-radius: var(--mv-radio-md); object-fit: contain; background: #071B52; }
  .mv-sitio .mv-mapa-caja { inline-size: 100%; block-size: clamp(16rem, 38vh, 24rem); border: 1px solid var(--mv-borde-control); border-radius: var(--mv-radio-lg); background: var(--mv-hielo); overflow: clip; z-index: 1; }
  .mv-sitio .mv-domicilio-card { display: flex; flex-direction: column; gap: var(--mv-espacio-3); padding: var(--mv-espacio-4); border: 1px solid var(--mv-linea); border-radius: var(--mv-radio-md); background: var(--mv-superficie); box-shadow: var(--mv-sombra-sm); }
  .mv-sitio .mv-medio-pago-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mv-espacio-3); padding: var(--mv-espacio-4); border: 1px solid var(--mv-linea); border-radius: 8px; background: var(--mv-superficie); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .12); transition: border-color .15s ease, box-shadow .15s ease; }
  .mv-sitio .mv-medio-pago-card:hover,
  .mv-sitio .mv-medio-pago-card:has(input:checked),
  .mv-sitio .mv-medio-pago-card--seleccionado { border-color: #3483FA; box-shadow: 0 0 0 1px #3483FA, 0 2px 8px rgba(52, 131, 250, .12); }
  .mv-sitio .mv-cupon-card { display: flex; flex-direction: column; gap: var(--mv-espacio-2); padding: var(--mv-espacio-4); border: 1px dashed var(--mv-accion-borde); border-radius: var(--mv-radio-md); background: var(--mv-advertencia-fondo); color: var(--mv-texto); }
  .mv-sitio .mv-badge-verificado { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border-radius: var(--mv-radio-pildora); background: var(--mv-exito-fondo); color: var(--mv-exito); font-size: var(--mv-texto-xs); font-weight: 750; }
  .mv-sitio .mv-badge-pendiente { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border-radius: var(--mv-radio-pildora); background: var(--mv-advertencia-fondo); color: var(--mv-advertencia); font-size: var(--mv-texto-xs); font-weight: 750; }

  /* ── Arquitectura Visual MercadoLibre vs MercadoVentas (Home, Ofertas, Auth, Categorías, PDP y Checkout) ── */
  .mv-sitio--canvas-ml, .mv-ml-canvas { background-color: #EBEBEB; }
  .mv-sitio .mv-ml-hero-degradado,
  .mv-sitio .mv-ml-hero {
    position: relative;
    background: linear-gradient(180deg, #FFE600 0%, #FFF159 58%, #EBEBEB 100%);
    padding-block-end: 1.5rem;
  }
  .mv-sitio .mv-ml-hero-fade {
    background: linear-gradient(180deg, transparent 60%, #EBEBEB 100%);
  }
  .mv-sitio .mv-ml-overlap-cards,
  .mv-sitio .mv-ml-quickcards,
  .mv-sitio .mgui-vd-ml-quickcards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.75rem, 1fr));
    gap: .75rem;
    margin-block-start: -1.15rem;
    margin-block-end: 1.25rem;
    position: relative;
    z-index: 4;
  }
  .mv-sitio .mv-ml-qcard,
  .mv-sitio .mv-ml-quickcard,
  .mv-sitio .mgui-vd-ml-quickcard {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .55rem;
    padding: .9rem .85rem;
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 6px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .12);
    color: #333333;
    text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease;
    min-block-size: 11.5rem;
  }
  .mv-sitio .mv-ml-qcard:hover,
  .mv-sitio .mv-ml-quickcard:hover,
  .mv-sitio .mgui-vd-ml-quickcard:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .12);
  }
  .mv-sitio .mv-ml-qcard__title,
  .mv-sitio .mv-ml-quickcard__title { margin: 0; font-size: 1.05rem; font-weight: 700; color: #1E293B; line-height: 1.25; }
  .mv-sitio .mv-ml-qcard__icon,
  .mv-sitio .mv-ml-quickcard__icon { display: inline-flex; align-items: center; justify-content: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 999px; background: #F1F5F9; color: #3483FA; font-size: 1.35rem; margin-inline: auto; }
  .mv-sitio .mv-ml-qcard__desc,
  .mv-sitio .mv-ml-quickcard__desc { margin: 0; font-size: 0.95rem; color: #64748B; line-height: 1.35; }
  .mv-sitio .mv-ml-qcard__cta,
  .mv-sitio .mv-ml-quickcard__cta { display: inline-flex; align-items: center; gap: .25rem; font-size: 0.95rem; font-weight: 700; color: #3483FA; margin-block-start: auto; }

  /* Barra y Grilla de Medios de Pago (.mv-ml-pagos-strip / .mv-ml-paystrip y .mv-ml-pagos-grid) */
  .mv-sitio .mv-ml-paystrip,
  .mv-sitio .mv-ml-pagos-strip,
  .mv-sitio .mgui-vd-ml-pagos-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
    gap: 0;
    background: #FFFFFF;
    border-radius: 6px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .12);
    border: 1px solid rgba(0, 0, 0, .06);
    margin-block-end: 1.25rem;
    overflow: hidden;
  }
  .mv-sitio .mv-ml-paystrip__item,
  .mv-sitio .mv-ml-pagos-strip__item {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: 1rem 1.1rem;
    border-inline-end: 1px solid #F1F5F9;
    min-inline-size: 0;
  }
  .mv-sitio .mv-ml-paystrip__item:last-child,
  .mv-sitio .mv-ml-pagos-strip__item:last-child { border-inline-end: 0; }
  .mv-sitio .mv-ml-paystrip__icon,
  .mv-sitio .mv-ml-pagos-strip__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    inline-size: 2.6rem;
    block-size: 2.6rem;
    border-radius: 999px;
    border: 1px solid #E2E8F0;
    background: #F8FAFC;
    color: #3483FA;
    font-size: 1.15rem;
  }
  .mv-sitio .mv-ml-paystrip__body,
  .mv-sitio .mv-ml-pagos-strip__body { display: flex; flex-direction: column; gap: .15rem; min-inline-size: 0; }
  .mv-sitio .mv-ml-paystrip__title,
  .mv-sitio .mv-ml-pagos-strip__title { font-size: 1.05rem; font-weight: 650; color: #1E293B; line-height: 1.2; }
  .mv-sitio .mv-ml-paystrip__sub,
  .mv-sitio .mv-ml-pagos-strip__sub { font-size: 0.95rem; color: #64748B; }
  .mv-sitio .mv-ml-paystrip__link,
  .mv-sitio .mv-ml-pagos-strip__link { font-size: 0.95rem; font-weight: 600; color: #3483FA; text-decoration: none; }
  .mv-sitio .mv-ml-paystrip__link:hover,
  .mv-sitio .mv-ml-pagos-strip__link:hover { text-decoration: underline; }

  .mv-sitio .mv-ml-paylogo-row,
  .mv-sitio .mv-ml-pagos-logos { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
  .mv-sitio .mv-ml-paylogo,
  .mv-sitio .mv-ml-pago-logo {
    display: inline-block;
    inline-size: 3.35rem;
    block-size: 1.45rem;
    object-fit: contain;
    border-radius: 4px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    padding: 1px 3px;
    vertical-align: middle;
  }
  .mv-sitio .mv-ml-paylogo--md,
  .mv-sitio .mv-ml-pago-logo--md { inline-size: 4.1rem; block-size: 1.75rem; }
  .mv-sitio .mv-ml-paylogo--lg,
  .mv-sitio .mv-ml-pago-logo--lg { inline-size: 4.8rem; block-size: 2.05rem; }

  .mv-sitio .mv-ml-pagos-grid,
  .mv-sitio .mv-ml-paygrid,
  .mv-sitio .mgui-vd-ml-pagos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
    gap: .85rem;
    margin-block: .85rem;
  }
  .mv-sitio .mv-ml-pago-card,
  .mv-sitio .mv-ml-pagos-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .55rem;
    padding: 1rem;
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 8px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .12);
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .mv-sitio .mv-ml-pago-card:hover,
  .mv-sitio .mv-ml-pagos-card:hover {
    border-color: #3483FA;
    box-shadow: 0 4px 12px rgba(52, 131, 250, .12);
  }
  .mv-sitio .mv-ml-pago-card__head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
  .mv-sitio .mv-ml-pago-card__title { font-size: 1.05rem; font-weight: 700; color: #1E293B; }
  .mv-sitio .mv-ml-pago-card__cuotas { font-size: 1.05rem; font-weight: 700; color: #00A650; }
  .mv-sitio .mv-ml-pago-card__meta { font-size: 0.95rem; color: #64748B; line-height: 1.35; }

  .mv-sitio .mv-ml-ofertas-split,
  .mv-ml-ofertas-split {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
    gap: 16px;
    margin-block-end: 1.25rem;
  }
  @media (min-width: 60.0625rem) {
    .mv-sitio .mv-ml-ofertas-split,
    .mv-ml-ofertas-split {
      grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
      width: 100%;
      gap: 16px;
    }
  }
  .mv-sitio .mv-ml-oferta-dia-card { display: flex; flex-direction: column; justify-content: space-between; gap: .75rem; padding: 1.25rem; background: #FFFFFF; border-radius: 8px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .12); border: 1px solid rgba(0, 0, 0, .07); }
  .mv-sitio .mv-ml-oferta-dia-badge { display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start; padding: .25rem .6rem; border-radius: 4px; background: #3483FA; color: #FFFFFF; font-size: 0.95rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }

  /* Home MercadoLibre: Hero y 6 tarjetas de acceso rápido (.mgui-vd-hero-ml, .mgui-vd-quick-strip) */
  .mv-sitio .mgui-vd-hero-ml,
  .mgui-vd-hero-ml {
    width: 100%;
    max-width: 100%;
    background: linear-gradient(180deg, #FFE600 0%, #FFF159 58%, #EBEBEB 100%);
    padding-block: 1rem 2rem;
  }
  .mv-sitio .mgui-vd-quick-strip,
  .mgui-vd-quick-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    width: 100%;
    max-width: 100%;
    gap: 12px;
    align-items: stretch;
    margin-block-end: 1.25rem;
  }
  @media (min-width: 60.0625rem) {
    .mv-sitio .mgui-vd-quick-strip,
    .mgui-vd-quick-strip {
      grid-template-columns: repeat(6, minmax(0, 1fr));
      width: 100%;
      gap: 12px;
    }
  }
  .mv-sitio .mgui-vd-quick-strip > *,
  .mgui-vd-quick-strip > *,
  .mv-sitio .mgui-vd-quick-card,
  .mgui-vd-quick-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: 184px;
    padding: 16px;
    background: #FFFFFF;
    border-radius: 6px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .12);
    border: 1px solid rgba(0, 0, 0, .06);
    text-decoration: none;
    color: #333333;
    box-sizing: border-box;
    transition: transform .16s ease, box-shadow .16s ease;
  }
  .mv-sitio .mgui-vd-quick-strip > *:hover,
  .mgui-vd-quick-strip > *:hover,
  .mv-sitio .mgui-vd-quick-card:hover,
  .mgui-vd-quick-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .14);
  }

  .mv-sitio .mv-ml-tiendas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); gap: 1rem; width: 100%; }
  .mv-sitio .mv-ml-tienda-card { display: flex; flex-direction: column; background: #FFFFFF; border-radius: 8px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .12); border: 1px solid rgba(0, 0, 0, .07); overflow: hidden; text-decoration: none; color: #1E293B; transition: transform .16s ease, box-shadow .16s ease; }
  .mv-sitio .mv-ml-tienda-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .12); }
  .mv-sitio .mv-ml-tienda-card__cover { block-size: 5.2rem; background: linear-gradient(125deg, #0F172A 0%, #1E3A8A 55%, #3483FA 100%); display: flex; align-items: flex-end; justify-content: center; padding-block-end: .35rem; position: relative; }
  .mv-sitio .mv-ml-tienda-card__cover--agro { background: linear-gradient(125deg, #064E3B 0%, #059669 60%, #10B981 100%); }
  .mv-sitio .mv-ml-tienda-card__cover--hogar { background: linear-gradient(125deg, #7C2D12 0%, #D97706 60%, #F59E0B 100%); }
  .mv-sitio .mv-ml-tienda-card__cover--ind { background: linear-gradient(125deg, #1E1B4B 0%, #4338CA 60%, #6366F1 100%); }
  .mv-sitio .mv-ml-tienda-card__logo { inline-size: 3.8rem; block-size: 3.8rem; border-radius: 10px; background: #FFFFFF; border: 2px solid #FFFFFF; box-shadow: 0 2px 6px rgba(0, 0, 0, .16); display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; font-weight: 800; color: #0F172A; margin-block-start: -1.9rem; align-self: center; position: relative; z-index: 2; }
  .mv-sitio .mv-ml-tienda-card__body { display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: .65rem 1rem 1rem; text-align: center; }
  .mv-sitio .mv-ml-tienda-card__mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; inline-size: 100%; margin-block: .25rem; }
  .mv-sitio .mv-ml-tienda-card__mini-item { padding: .35rem; border: 1px solid #F1F5F9; border-radius: 6px; background: #F8FAFC; font-size: 0.95rem; color: #475569; font-weight: 600; }

  .mv-sitio .mv-ml-ofertas-header { background: #FFFFFF; border-bottom: 1px solid #E2E8F0; padding: 1.15rem 1.25rem 0; border-radius: 8px 8px 0 0; margin-block-end: 1rem; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .06); }
  .mv-sitio .mv-ml-ofertas-tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin-block-start: .85rem; }
  .mv-sitio .mv-ml-ofertas-tab { display: inline-flex; align-items: center; gap: .4rem; padding: .65rem 1rem; font-size: 1.05rem; font-weight: 650; color: #475569; text-decoration: none; border-bottom: 3px solid transparent; transition: color .15s ease, border-color .15s ease; }
  .mv-sitio .mv-ml-ofertas-tab:hover { color: #3483FA; }
  .mv-sitio .mv-ml-ofertas-tab--active { color: #3483FA; border-bottom-color: #3483FA; font-weight: 750; }

  .mv-sitio .mv-ml-auth-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem 3rem; background: #EBEBEB; border-radius: 8px; }
  .mv-sitio .mv-ml-auth-card { inline-size: 100%; max-inline-size: 46rem; background: #FFFFFF; border-radius: 8px; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .12); border: 1px solid rgba(0, 0, 0, .08); padding: clamp(1.25rem, 3vw, 2.25rem); }
  .mv-sitio .mv-ml-auth-card--narrow { max-inline-size: 34rem; }
  .mv-sitio .mv-ml-auth-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem; margin-block: 1rem 1.35rem; }
  .mv-sitio .mv-ml-auth-step { display: flex; align-items: flex-start; gap: .65rem; padding: .85rem; border: 1px solid #E2E8F0; border-radius: 6px; background: #F8FAFC; }
  .mv-sitio .mv-ml-auth-step__num { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; inline-size: 1.75rem; block-size: 1.75rem; border-radius: 999px; background: #3483FA; color: #FFFFFF; font-size: 1.05rem; font-weight: 800; }

  .mv-sitio .mv-boton--ml-azul,
  .mv-boton--ml-azul {
    background: #3483fa;
    border-color: #3483fa;
    color: #fff;
    font-weight: 600;
    height: 48px;
    min-block-size: 48px;
    border-radius: 6px;
    width: 100%;
    inline-size: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
  }
  .mv-sitio .mv-boton--ml-azul:hover,
  .mv-boton--ml-azul:hover { background: #2968C8; border-color: #2968C8; color: #FFFFFF; }
  .mv-sitio .mv-boton--ml-secundario,
  .mv-boton--ml-secundario {
    background: rgba(65, 137, 230, .15);
    border-color: transparent;
    color: #3483fa;
    font-weight: 600;
    height: 48px;
    min-block-size: 48px;
    border-radius: 6px;
    width: 100%;
    inline-size: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
  }
  .mv-sitio .mv-boton--ml-secundario:hover,
  .mv-boton--ml-secundario:hover { background: rgba(65, 137, 230, .24); color: #2968C8; }

  .mv-sitio .mv-ml-switch-list { display: flex; flex-direction: column; gap: .5rem; margin-block-end: 1rem; }
  .mv-sitio .mv-ml-switch-row { display: flex; align-items: center; justify-content: space-between; gap: .65rem; padding: .65rem .8rem; background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 6px; text-decoration: none; color: #1E293B; font-size: 1.05rem; font-weight: 650; transition: border-color .15s ease; }
  .mv-sitio .mv-ml-switch-row:hover { border-color: #3483FA; }
  .mv-sitio .mv-ml-switch-pill { position: relative; display: inline-flex; align-items: center; inline-size: 2.35rem; block-size: 1.3rem; border-radius: 999px; background: #CBD5E1; padding: .15rem; transition: background .15s ease; flex-shrink: 0; }
  .mv-sitio .mv-ml-switch-pill::after { content: ""; inline-size: 1rem; block-size: 1rem; border-radius: 999px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .15s ease; }
  .mv-sitio .mv-ml-switch-pill--on { background: #3483FA; }
  .mv-sitio .mv-ml-switch-pill--on::after { transform: translateX(1.05rem); }

  /* PDP en hoja blanca unificada de 3 columnas estilo MercadoLibre (.mgui-vd-pdp-3col y .mgui-vd-pdp-4col) */
  .mv-sitio .mv-ml-pdp-card,
  .mv-sitio .mv-ml-pdp-container {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .12);
    border: 1px solid rgba(0, 0, 0, .08);
    padding: 24px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .mv-sitio .mv-ml-pdp-3col,
  .mv-sitio .mgui-vd-pdp-3col,
  .mgui-vd-pdp-3col,
  .mv-sitio .mgui-vd-pdp-4col,
  .mgui-vd-pdp-4col {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .12);
    padding: 24px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    width: 100%;
    max-width: 100%;
    align-items: start;
    box-sizing: border-box;
  }
  @media (min-width: 60.0625rem) {
    .mv-sitio .mv-ml-pdp-3col,
    .mv-sitio .mgui-vd-pdp-3col,
    .mgui-vd-pdp-3col,
    .mv-sitio .mgui-vd-pdp-4col,
    .mgui-vd-pdp-4col {
      grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) 340px;
      gap: 28px;
      width: 100%;
      max-width: 100%;
      align-items: start;
    }
  }
  .mv-sitio .mgui-vd-pdp-right-col,
  .mgui-vd-pdp-right-col,
  .mv-sitio .mgui-vd-buybox,
  .mgui-vd-buybox,
  .mv-sitio .mv-ml-buybox {
    position: sticky;
    top: 20px;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 8px;
    padding: 20px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-sizing: border-box;
  }
  .mv-sitio .mv-ml-thumb-48 { inline-size: 3rem; block-size: 3rem; border-radius: 4px; border: 1px solid #E5E5E5; padding: .15rem; background: #FFFFFF; cursor: pointer; object-fit: contain; }
  .mv-sitio .mv-ml-thumb-48--active { border: 2px solid #3483FA; }
  .mv-sitio .mv-ml-zebra-table { inline-size: 100%; border-collapse: collapse; border: 1px solid #E5E5E5; border-radius: 6px; overflow: hidden; font-size: 1.05rem; }
  .mv-sitio .mv-ml-zebra-table tr:nth-child(odd) { background: #F5F5F5; }
  .mv-sitio .mv-ml-zebra-table tr:nth-child(even) { background: #FFFFFF; }
  .mv-sitio .mv-ml-zebra-table th, .mv-sitio .mv-ml-zebra-table td { padding: .65rem .85rem; text-align: start; border-bottom: 1px solid #EBEBEB; }
  .mv-sitio .mv-ml-zebra-table th { inline-size: 38%; font-weight: 650; color: #333333; }

  .mv-sitio .mv-ml-termometro,
  .mv-sitio .mv-termometro-5barras {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .3rem;
    align-items: center;
    margin-block: .55rem;
  }
  .mv-sitio .mv-ml-termometro__bar { block-size: .45rem; border-radius: 2px; opacity: .45; }
  .mv-sitio .mv-ml-termometro__bar--1 { background: #F23D4F; }
  .mv-sitio .mv-ml-termometro__bar--2 { background: #FF7733; }
  .mv-sitio .mv-ml-termometro__bar--3 { background: #FFE600; }
  .mv-sitio .mv-ml-termometro__bar--4 { background: #A6E22E; }
  .mv-sitio .mv-ml-termometro__bar--5 { background: #00A650; block-size: .68rem; opacity: 1; box-shadow: 0 0 0 1px rgba(0, 166, 80, .25); }
  .mv-sitio .mv-ml-seller-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; text-align: center; border-block-start: 1px solid #F1F5F9; padding-block-start: .65rem; font-size: 0.95rem; color: #475569; }

  /* Carrito y Checkout Express de 2 columnas estilo MercadoLibre */
  .mv-sitio .mv-ml-checkout-layout,
  .mv-ml-checkout-layout,
  .mv-sitio .mv-ml-checkout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    width: 100%;
    max-width: 100%;
    align-items: start;
    box-sizing: border-box;
  }
  @media (min-width: 60.0625rem) {
    .mv-sitio .mv-ml-checkout-layout,
    .mv-ml-checkout-layout,
    .mv-sitio .mv-ml-checkout-grid {
      grid-template-columns: minmax(0, 1fr) 360px;
      gap: 24px;
      width: 100%;
      max-width: 100%;
      align-items: start;
    }
  }
  .mv-sitio .mv-ml-checkout-main,
  .mv-ml-checkout-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    min-width: 0;
  }
  .mv-sitio .mv-ml-checkout-aside,
  .mv-ml-checkout-aside,
  .mv-sitio .mv-ml-checkout-resumen-sticky {
    position: sticky;
    top: 20px;
    inset-block-start: 20px;
    background: #fff;
    border-radius: 6px;
    padding: 24px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .12);
    border: 1px solid rgba(0, 0, 0, .07);
    box-sizing: border-box;
  }
  .mv-sitio .mv-ml-step-card,
  .mv-ml-step-card {
    background: #fff;
    border-radius: 6px;
    padding: 24px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .12);
    border: 1px solid rgba(0, 0, 0, .07);
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
  }
  .mv-sitio .mv-ml-radio-row,
  .mv-ml-radio-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  }
  .mv-sitio .mv-ml-radio-row:hover,
  .mv-ml-radio-row:hover,
  .mv-sitio .mv-ml-radio-row:has(input:checked),
  .mv-ml-radio-row:has(input:checked) {
    border-color: #3483fa;
    box-shadow: 0 0 0 1px #3483fa;
    background: #F8FBFF;
  }
  .mv-sitio .mv-ml-checkout-paygrid { display: flex; flex-direction: column; gap: .65rem; }
  .mv-sitio .mv-ml-checkout-paycard { display: flex; flex-direction: column; gap: .55rem; padding: .9rem 1rem; border: 1px solid #E2E8F0; border-radius: 8px; background: #FFFFFF; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
  .mv-sitio .mv-ml-checkout-paycard:hover,
  .mv-sitio .mv-ml-checkout-paycard:has(input:checked) { border-color: #3483FA; box-shadow: 0 0 0 1px #3483FA, 0 2px 8px rgba(52, 131, 250, .1); background: #F8FBFF; }
  .mv-sitio .mv-ml-checkout-paycard__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .65rem; }
  .mv-sitio .mv-ml-checkout-paymeta { display: flex; flex-wrap: wrap; gap: .45rem; font-size: 0.95rem; color: #475569; }

  /* Pulido de contraste en cabecera, hero compacto, catálogo de 2/3 columnas estilo MercadoLibre y PDP */
  .mv-sitio .mgui-vd-hdr-action,
  .mv-sitio .mgui-vd-header__main .mgui-vd-hdr-action {
    color: #FFFFFF !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    font-family: inherit !important;
    cursor: pointer !important;
    text-decoration: none !important;
  }
  .mv-sitio .mgui-vd-hdr-action span,
  .mv-sitio .mgui-vd-hdr-action__lbl {
    color: #FFFFFF !important;
    font-weight: 500 !important;
  }
  .mv-sitio .mgui-vd-hdr-action__badge {
    background: #F59E0B !important;
    color: #0F172A !important;
    font-weight: 800 !important;
  }
  .mv-sitio .mgui-vd-hdr-action:hover,
  .mv-sitio .mgui-vd-hdr-action:hover span {
    background: rgba(255, 255, 255, .1) !important;
    color: #FFE600 !important;
  }
  .mv-sitio .mgui-vd-hero-dual {
    padding: 1.25rem 1.75rem 2.35rem !important;
    min-block-size: auto !important;
  }
  .mv-sitio .mgui-vd-hero-dual__title {
    font-size: clamp(1.5rem, 2.15vw, 2rem) !important;
    line-height: 1.18 !important;
    color: #FFFFFF !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  .mv-sitio .mgui-vd-hero-dual__img {
    max-block-size: 220px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
  }
  .mv-sitio .mgui-vd-catalog-3col,
  .mgui-vd-catalog-3col,
  .mv-sitio .mgui-vd-cat-3col {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
    gap: 24px;
    align-items: start;
    box-sizing: border-box;
  }
  @media (min-width: 60.0625rem) {
    .mv-sitio .mgui-vd-catalog-3col,
    .mgui-vd-catalog-3col,
    .mv-sitio .mgui-vd-cat-3col {
      grid-template-columns: 260px minmax(0, 1fr) !important;
      width: 100% !important;
      max-width: 100% !important;
      gap: 24px !important;
      align-items: start !important;
    }
    .mv-sitio .mgui-vd-catalog-3col:has(> :nth-child(3)),
    .mgui-vd-catalog-3col:has(> :nth-child(3)),
    .mv-sitio .mgui-vd-cat-3col:has(> :nth-child(3)) {
      grid-template-columns: 260px minmax(0, 1fr) 280px !important;
    }
    .mv-sitio .mgui-vd-cat-grid:not(.mgui-vd-cat-grid--lista),
    .mv-sitio .mgui-vd-cat-3col__center .mgui-vd-pgrid {
      grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)) !important;
      width: 100% !important;
      gap: 16px !important;
    }
  }
  .mv-sitio .mgui-vd-pdp-info__title {
    font-size: 1.35rem !important;
    line-height: 1.28 !important;
    font-weight: 650 !important;
    color: #0F172A !important;
    letter-spacing: -.01em !important;
    overflow-wrap: break-word !important;
  }
  .mv-sitio .mgui-vd-pdp-tplbar__chip--active,
  .mv-sitio .mgui-vd-pdp-tplbar__chip--active span,
  .mv-sitio .mgui-vd-rubro-switcher__pill--active {
    background: #0F2C59 !important;
    color: #FFFFFF !important;
    border-color: #0F2C59 !important;
  }
}

@layer mv.estados {
  .mv-sitio .mv-aviso { padding: 1rem 1.2rem; border: 1px solid var(--mv-informacion); border-inline-start-width: 4px; border-radius: var(--mv-radio-sm); background: var(--mv-informacion-fondo); color: var(--mv-informacion); }
  .mv-sitio .mv-aviso--exito { background: var(--mv-exito-fondo); border-color: var(--mv-exito); color: var(--mv-exito); }
  .mv-sitio .mv-aviso--error { background: var(--mv-error-fondo); border-color: var(--mv-error); color: var(--mv-error); }
  .mv-sitio .mv-aviso--advertencia { background: var(--mv-advertencia-fondo); border-color: var(--mv-advertencia); color: var(--mv-advertencia); }
  .mv-sitio .mv-vacio { display: grid; place-items: center; text-align: center; gap: 1rem; padding: 3rem 1rem; border: 1px dashed var(--mv-borde-control); border-radius: var(--mv-radio-lg); }
  .mv-sitio .mv-esqueleto { min-block-size: 1rem; background: var(--mv-linea); border-radius: var(--mv-radio-sm); }
  .mv-sitio .mv-dialogo { max-inline-size: min(40rem, calc(100vw - 2rem)); max-block-size: calc(100dvh - 2rem); overflow: auto; padding: clamp(1rem, 3vw, 2rem); color: var(--mv-texto); background: var(--mv-superficie); border: 1px solid var(--mv-linea); border-radius: var(--mv-radio-xl); box-shadow: var(--mv-sombra-lg); }
  .mv-sitio .mv-dialogo::backdrop { background: rgb(8 22 48 / .65); }
  .mv-sitio .mv-burbuja { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .8rem; background: var(--mv-superficie); color: var(--mv-texto); border: 1px solid var(--mv-linea); border-radius: var(--mv-radio-pildora); box-shadow: var(--mv-sombra-sm); }
}

@layer mv.utilidades {
  .mv-sitio .mv-ancho-completo { inline-size: 100%; width: 100%; max-width: 100%; }
  .mv-sitio .mv-centrado { text-align: center; }
  .mv-sitio .mv-empujar { margin-inline-start: auto; }
  .mv-sitio .mv-sin-margen { margin: 0; }
  .mv-sitio .mv-margen-superior { margin-block-start: 1.5rem; }
  .mv-sitio .mv-margen-inferior { margin-block-end: 1.5rem; }
  .mv-sitio .mv-espacio-pequeno { gap: .5rem; }
  .mv-sitio .mv-espacio-grande { gap: 2rem; }
  .mv-sitio .mv-recorte-seguro { overflow-wrap: anywhere; min-inline-size: 0; }
  .mv-sitio .mv-solo-escritorio { display: none; }
  @media (min-width: 48rem) { .mv-sitio .mv-solo-escritorio { display: initial; } }

  /* Secciones y grillas de MercadoGestión Studio: 100% de pantalla por defecto */
  .mgui-studio-sec,
  .mgui-studio-sec__inner,
  .mgui-studio-grid,
  .mgui-studio-grid--3 {
    width: 100%;
    max-width: var(--mg-sec-max-width, 100%);
    margin-inline: auto;
    box-sizing: border-box;
  }

  /* Configuración de ancho de sección (100% completo por defecto y presets configurables) */
  [data-ancho-seccion="100%"],
  [data-ancho-seccion="completo"] {
    --mv-seccion-ancho: 100%;
    --mg-sec-max-width: 100%;
    max-width: 100%;
  }
  [data-ancho-seccion="1600px"] {
    --mv-seccion-ancho: 1600px;
    --mg-sec-max-width: 1600px;
    max-width: 1600px;
  }
  [data-ancho-seccion="1360px"] {
    --mv-seccion-ancho: 1360px;
    --mg-sec-max-width: 1360px;
    max-width: 1360px;
  }
  [data-ancho-seccion="1200px"] {
    --mv-seccion-ancho: 1200px;
    --mg-sec-max-width: 1200px;
    max-width: 1200px;
  }

  /* ==========================================================================
     REDISEÑO TIENDA VALKYRIE (TENANT 2) — SISTEMA VISUAL GAMING (.mgui-gaming-*)
     Cero estilos en línea · Fidelidad exacta con los 4 mockups de referencia
     ========================================================================== */

  .mgui-visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* Ajuste de contenedores del lienzo Studio cuando alojan secciones Valkyrie */
  [data-studio-node-type="seccion"]:has([data-gaming-component]) {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .mgui-vd-tienda--compacta,
  .mgui-vd-tienda-lienzo {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  .mgui-studio-sec:has(.mgui-gaming-header),
  .mgui-studio-sec:has(.mgui-gaming-hero),
  .mgui-studio-sec:has(.mgui-gaming-catalog-section),
  .mgui-studio-sec:has(.mgui-gaming-pdp),
  .mgui-studio-sec:has(.mgui-gaming-comparator),
  .mgui-studio-sec:has(.mgui-gaming-trust-footer),
  .mgui-studio-node:has(> .mgui-studio-node-content > .mgui-studio-sec > .mgui-studio-node-content > .mgui-gaming-header) {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
  }

  .mgui-studio-node-content:has(> .mgui-studio-sec > .mgui-studio-node-content > .mgui-gaming-header) {
    gap: 0 !important;
    padding: 0 !important;
  }

  [data-studio-node-type="seccion"]:has([data-gaming-component]) > [class*="content"],
  div:has(> .mgui-gaming-header),
  div:has(> .mgui-gaming-hero),
  div:has(> .mgui-gaming-catalog-section),
  div:has(> .mgui-gaming-pdp),
  div:has(> .mgui-gaming-comparator),
  div:has(> .mgui-gaming-trust-footer) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  .mgui-gaming-header,
  .mgui-gaming-hero,
  .mgui-gaming-catalog-section,
  .mgui-gaming-pdp,
  .mgui-gaming-comparator,
  .mgui-gaming-trust-footer {
    grid-column: 1 / -1;
    width: 100%;
    box-sizing: border-box;
  }

  /* ── 1. ENCABEZADO COMERCIAL VALKYRIE COMPACTO (mgui-gaming-header) ── */
  .mgui-gaming-header {
    width: 100%;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: #061412;
    color: #FFFFFF;
    position: sticky;
    top: 0;
    z-index: 40;
  }

  .mgui-gaming-header__ribbon {
    display: none;
  }

  .mgui-gaming-header__bar {
    background: linear-gradient(90deg, #061412 0%, #0B2620 50%, #061412 100%);
    border-bottom: 1px solid rgba(44, 229, 155, 0.22);
  }

  .mgui-gaming-header__inner {
    max-width: 1380px;
    margin: 0 auto;
    min-height: 42px;
    padding: 0 1.15rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
  }

  .mgui-gaming-header__burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    color: #FFFFFF;
    font-size: 0.95rem;
    cursor: pointer;
  }

  .mgui-gaming-header__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    color: #FFFFFF;
  }

  .mgui-gaming-header__logo-icon {
    width: 20px;
    height: 14px;
    object-fit: contain;
    display: block;
  }

  .mgui-gaming-header__wordmark {
    font-family: 'Orbitron', 'Rajdhani', 'Chakra Petch', 'Inter', system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    color: #FFFFFF;
    text-transform: uppercase;
    display: inline-flex;
    align-items: flex-start;
    line-height: 1;
  }

  .mgui-gaming-header__reg {
    font-size: 0.95rem;
    color: #2CE59B;
    margin-left: 0.1rem;
    top: -0.15em;
  }

  .mgui-gaming-header__divider {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.14);
    flex-shrink: 0;
  }

  .mgui-gaming-header__nav {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    margin-right: auto;
  }

  .mgui-gaming-header__nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    color: #CBD5E1;
    font-size: 1.05rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s ease;
    white-space: nowrap;
  }

  .mgui-gaming-header__nav-link:hover,
  .mgui-gaming-header__nav-link.is-active {
    color: #FFFFFF;
    font-weight: 600;
  }

  .mgui-gaming-header__nav-link.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: #2CE59B;
    border-radius: 2px 2px 0 0;
    box-shadow: 0 -2px 8px rgba(44, 229, 155, 0.5);
  }

  .mgui-gaming-header__right {
    display: flex;
    align-items: center;
    gap: 0.45rem;
  }

  .mgui-gaming-header__search {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 170px;
    height: 28px;
    padding: 0 0.65rem;
    background: rgba(15, 38, 33, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
  }

  .mgui-gaming-header__search-icon {
    font-size: 0.95rem;
    opacity: 0.75;
  }

  .mgui-gaming-header__search-input {
    width: 100%;
    border: 0;
    background: transparent;
    color: #FFFFFF;
    font-size: 0.95rem;
    outline: none;
  }

  .mgui-gaming-header__search-input::placeholder {
    color: #94A3B8;
  }

  .mgui-gaming-header__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #E2E8F0;
    font-size: 1.05rem;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
  }

  .mgui-gaming-header__icon-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
  }

  /* ── 2. HERO PRINCIPAL (mgui-gaming-hero — Mockup 1) ── */
  .mgui-gaming-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    background:
      radial-gradient(ellipse at 68% 45%, rgba(44, 229, 155, 0.24) 0%, rgba(12, 74, 59, 0.12) 45%, transparent 72%),
      linear-gradient(115deg, #041210 0%, #072821 48%, #0B3F33 78%, #041310 100%);
    color: #FFFFFF;
    border-bottom: 2px solid rgba(44, 229, 155, 0.35);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
  }

  .mgui-gaming-hero__grid {
    max-width: 1380px;
    margin: 0 auto;
    padding: 3.25rem 1.75rem 3rem;
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(420px, 1.22fr);
    align-items: center;
    gap: 2.5rem;
  }

  .mgui-gaming-hero__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.15rem;
    z-index: 1;
  }

  .mgui-gaming-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: #E2E8F0;
    font-size: 1.02rem;
    font-style: italic;
    font-weight: 500;
  }

  .mgui-gaming-hero__parallelogram {
    display: inline-block;
    width: 16px;
    height: 12px;
    background: #2CE59B;
    transform: skewX(-24deg);
    box-shadow: 0 0 10px rgba(44, 229, 155, 0.55);
  }

  .mgui-gaming-hero__title {
    margin: 0;
    font-size: clamp(2.35rem, 4vw, 3.5rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.025em;
    color: #FFFFFF;
  }

  .mgui-gaming-hero__subtitle {
    margin: 0;
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    line-height: 1.45;
    color: #D1FAE5;
    font-weight: 400;
    max-width: 34ch;
  }

  .mgui-gaming-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
  }

  .mgui-gaming-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 1.65rem;
    font-size: 0.98rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 8px;
    transform: skewX(-10deg);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    cursor: pointer;
  }

  .mgui-gaming-btn--mint {
    background: #2CE59B;
    color: #04221B;
    border: 1px solid #2CE59B;
    box-shadow: 0 8px 24px rgba(44, 229, 155, 0.28);
  }

  .mgui-gaming-btn--mint:hover {
    background: #34F5A8;
    box-shadow: 0 10px 28px rgba(44, 229, 155, 0.42);
  }

  .mgui-gaming-btn--outline-mint {
    background: rgba(6, 28, 23, 0.65);
    color: #FFFFFF;
    border: 1.5px solid #2CE59B;
  }

  .mgui-gaming-btn--outline-mint:hover {
    background: rgba(44, 229, 155, 0.14);
  }

  .mgui-gaming-hero__media {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mgui-gaming-hero__media img {
    width: 100%;
    max-width: 720px;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.55));
  }

  /* ── 3. SECCIÓN DE PRODUCTOS EN INICIO (mgui-gaming-catalog-section — Mockup 1) ── */
  .mgui-gaming-catalog-section {
    width: 100%;
    background: #FFFFFF;
    color: #0F172A;
    padding: 2.5rem 0 2.25rem;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
  }

  .mgui-gaming-catalog-section__inner {
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 1.75rem;
  }

  .mgui-gaming-section-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
  }

  .mgui-gaming-section-head__parallelogram {
    display: inline-block;
    width: 18px;
    height: 14px;
    background: #10B981;
    transform: skewX(-24deg);
  }

  .mgui-gaming-section-head__title {
    margin: 0;
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0F172A;
  }

  .mgui-gaming-product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }

  .mgui-gaming-product-card {
    display: grid;
    grid-template-columns: minmax(200px, 0.92fr) minmax(240px, 1.15fr);
    align-items: center;
    gap: 1.35rem;
    padding: 1.5rem;
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .mgui-gaming-product-card:hover {
    border-color: #10B981;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  }

  .mgui-gaming-product-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
  }

  .mgui-gaming-product-card__media img {
    width: 100%;
    max-width: 280px;
    height: auto;
    object-fit: contain;
  }

  .mgui-gaming-product-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    border-left: 1px solid #E2E8F0;
    padding-left: 1.35rem;
  }

  .mgui-gaming-product-card__title {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 800;
    color: #0F172A;
    letter-spacing: -0.015em;
  }

  .mgui-gaming-product-card__specs {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #1E293B;
  }

  .mgui-gaming-product-card__desc {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    color: #475569;
  }

  .mgui-gaming-product-card__pricing {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-top: 0.15rem;
  }

  .mgui-gaming-product-card__transfer-label {
    font-size: 1.05rem;
    font-weight: 700;
    color: #047857;
  }

  .mgui-gaming-product-card__price {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #0F172A;
  }

  .mgui-gaming-product-card__installments {
    font-size: 1.05rem;
    color: #475569;
    margin-top: 0.15rem;
  }

  .mgui-gaming-product-card__actions {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    margin-top: 0.65rem;
  }

  .mgui-gaming-product-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 1.4rem;
    background: #2CE59B;
    color: #04221B;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.15s ease;
  }

  .mgui-gaming-product-card__cta:hover {
    background: #10B981;
    color: #FFFFFF;
  }

  .mgui-gaming-product-card__compare-link {
    color: #0F172A;
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  /* ── 4. PIE DE CONFIANZA Y SERVICIOS COMPACTO (mgui-gaming-trust-footer) ── */
  .mgui-gaming-trust-footer {
    width: 100%;
    background: #061412;
    color: #CBD5E1;
    border-top: 1px solid rgba(44, 229, 155, 0.22);
    padding: 0.35rem 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
  }

  .mgui-gaming-trust-footer__inner {
    max-width: 1380px;
    margin: 0 auto;
    min-height: 34px;
    padding: 0 1.15rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .mgui-gaming-trust-footer__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.95rem;
    color: #94A3B8;
  }

  .mgui-gaming-trust-footer__brand strong {
    color: #FFFFFF;
    font-weight: 800;
    letter-spacing: 0.06em;
  }

  .mgui-gaming-trust-footer__pills {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.85rem;
  }

  .mgui-gaming-trust-footer__item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #E2E8F0;
    font-size: 0.95rem;
    line-height: 1.2;
  }

  .mgui-gaming-trust-footer__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
  }

  .mgui-gaming-trust-footer__item strong {
    display: inline;
    font-size: 0.95rem;
    font-weight: 700;
    color: #2CE59B;
  }

  .mgui-gaming-trust-footer__item p {
    display: inline;
    margin: 0;
    font-size: 0.95rem;
    color: #CBD5E1;
  }

  .mgui-gaming-trust-footer__links {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
  }

  .mgui-gaming-trust-footer__links a {
    color: #94A3B8;
    text-decoration: none;
    transition: color 0.15s ease;
  }

  .mgui-gaming-trust-footer__links a:hover {
    color: #2CE59B;
  }

  /* ── 5. FICHA DE PRODUCTO PDP (mgui-gaming-pdp — Mockups 2 Mobile & 4 Desktop) ── */
  .mgui-gaming-pdp {
    width: 100%;
    background: #F8FAFC;
    color: #0F172A;
    padding: 1.25rem 0 3rem;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
  }

  .mgui-gaming-pdp__container {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 1.75rem;
  }

  .mgui-gaming-pdp__breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.05rem;
    color: #64748B;
    margin-bottom: 1.15rem;
  }

  .mgui-gaming-pdp__breadcrumb a {
    color: #475569;
    text-decoration: none;
  }

  .mgui-gaming-pdp__breadcrumb a:hover {
    color: #0F172A;
    text-decoration: underline;
  }

  .mgui-gaming-pdp__breadcrumb strong {
    color: #0F172A;
    font-weight: 600;
  }

  .mgui-gaming-pdp__first-screen {
    display: grid;
    grid-template-columns: minmax(380px, 1.15fr) minmax(360px, 0.95fr);
    gap: 2.25rem;
    align-items: start;
  }

  .mgui-gaming-pdp__col-gallery {
    background: #EEF2F6;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 2rem 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
  }

  .mgui-gaming-pdp__main-image-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 360px;
  }

  .mgui-gaming-pdp__main-image {
    width: 100%;
    max-width: 620px;
    height: auto;
    object-fit: contain;
  }

  .mgui-gaming-pdp__thumbs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
  }

  .mgui-gaming-pdp__thumb-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 86px;
    padding: 0.45rem;
    background: #F8FAFC;
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
  }

  .mgui-gaming-pdp__thumb-btn.is-active,
  .mgui-gaming-pdp__thumb-btn:hover {
    border-color: #2CE59B;
    background: #FFFFFF;
  }

  .mgui-gaming-pdp__thumb-btn img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  .mgui-gaming-pdp__col-buybox {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }

  .mgui-gaming-pdp__eyebrow {
    display: inline-block;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #059669;
  }

  .mgui-gaming-pdp__title {
    margin: 0.15rem 0 0;
    font-size: clamp(2rem, 3vw, 2.65rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: #0F172A;
  }

  .mgui-gaming-pdp__confirmed-badges {
    list-style: none;
    padding: 0;
    margin: 0.25rem 0 0.65rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .mgui-gaming-pdp__attr-badge {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 0.85rem;
    background: #F0FDF4;
    border: 1.5px solid #34D399;
    border-radius: 8px;
    color: #064E3B;
    font-size: 1.05rem;
    font-weight: 700;
  }

  .mgui-gaming-pdp__tagline {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    font-style: italic;
    color: #334155;
  }

  .mgui-gaming-pdp__buy-card {
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    border-radius: 14px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
  }

  .mgui-gaming-pdp__pay-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid #CBD5E1;
    border-radius: 10px;
    overflow: hidden;
    background: #F8FAFC;
  }

  .mgui-gaming-pdp__pay-tab {
    min-height: 42px;
    border: 0;
    background: transparent;
    color: #334155;
    font-size: 1.05rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    cursor: pointer;
  }

  .mgui-gaming-pdp__pay-tab.is-active {
    background: #064E3B;
    color: #FFFFFF;
  }

  .mgui-gaming-pdp__pay-check {
    color: #2CE59B;
    font-weight: 900;
  }

  .mgui-gaming-pdp__price-box {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 0.75rem;
  }

  .mgui-gaming-pdp__price-main {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
  }

  .mgui-gaming-pdp__price-amount {
    font-size: clamp(2.1rem, 3vw, 2.65rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.025em;
    color: #0F172A;
  }

  .mgui-gaming-pdp__price-label {
    font-size: 1.05rem;
    color: #475569;
    font-weight: 500;
  }

  .mgui-gaming-pdp__finance-box {
    background: #EBF5F2;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }

  .mgui-gaming-pdp__finance-box strong {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0F172A;
  }

  .mgui-gaming-pdp__finance-box span {
    font-size: 1.05rem;
    color: #475569;
  }

  .mgui-gaming-pdp__pay-methods-link {
    font-size: 1.05rem;
    font-weight: 600;
    color: #047857;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .mgui-gaming-pdp__shipping-step {
    border-top: 1px solid #E2E8F0;
    padding-top: 0.95rem;
  }

  .mgui-gaming-pdp__shipping-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
  }

  .mgui-gaming-pdp__shipping-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: #1E293B;
  }

  .mgui-gaming-pdp__shipping-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    justify-content: flex-end;
  }

  .mgui-gaming-pdp__cp-input {
    width: 150px;
    height: 40px;
    padding: 0 0.75rem;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    font-size: 1.05rem;
    color: #0F172A;
    background: #FFFFFF;
  }

  .mgui-gaming-pdp__cp-btn {
    height: 40px;
    padding: 0 1.1rem;
    background: #064E3B;
    color: #FFFFFF;
    border: 0;
    border-radius: 8px;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
  }

  .mgui-gaming-pdp__cart-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: center;
  }

  .mgui-gaming-pdp__qty-stepper {
    display: inline-flex;
    align-items: center;
    height: 48px;
    border: 1px solid #CBD5E1;
    border-radius: 10px;
    background: #F8FAFC;
    overflow: hidden;
  }

  .mgui-gaming-pdp__qty-btn {
    width: 38px;
    height: 100%;
    border: 0;
    background: transparent;
    color: #0F172A;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
  }

  .mgui-gaming-pdp__qty-val {
    min-width: 32px;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0F172A;
  }

  .mgui-gaming-pdp__add-cart-btn {
    min-height: 48px;
    border: 0;
    border-radius: 10px;
    background: #2CE59B;
    color: #04221B;
    font-size: 1rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(44, 229, 155, 0.32);
  }

  .mgui-gaming-pdp__add-cart-btn:hover {
    background: #10B981;
    color: #FFFFFF;
  }

  .mgui-gaming-pdp__sublinks {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
    padding-top: 0.65rem;
    border-top: 1px solid #F1F5F9;
  }

  .mgui-gaming-pdp__sublink {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #334155;
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: none;
  }

  .mgui-gaming-pdp__sublink:hover {
    color: #047857;
    text-decoration: underline;
  }

  .mgui-gaming-pdp__sublink-sep {
    color: #CBD5E1;
  }

  /* Debajo de la primera pantalla en PDP */
  .mgui-gaming-pdp__below {
    margin-top: 2.25rem;
  }

  .mgui-gaming-pdp__tabs {
    display: flex;
    align-items: center;
    gap: 2rem;
    border-bottom: 1px solid #CBD5E1;
    margin-bottom: 1.25rem;
  }

  .mgui-gaming-pdp__tab {
    position: relative;
    padding: 0.75rem 0.25rem;
    border: 0;
    background: transparent;
    color: #475569;
    font-size: 0.98rem;
    font-weight: 600;
    cursor: pointer;
  }

  .mgui-gaming-pdp__tab.is-active {
    color: #0F172A;
    font-weight: 800;
  }

  .mgui-gaming-pdp__tab.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background: #2CE59B;
    border-radius: 3px 3px 0 0;
  }

  .mgui-gaming-pdp__highlights {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 1.5rem;
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 1.25rem;
    align-items: center;
  }

  .mgui-gaming-pdp__highlight-intro h3 {
    margin: 0 0 0.35rem;
    font-size: 1.25rem;
    font-weight: 800;
    color: #0F172A;
  }

  .mgui-gaming-pdp__highlight-intro p {
    margin: 0;
    font-size: 1.05rem;
    color: #475569;
    line-height: 1.45;
  }

  .mgui-gaming-pdp__highlight-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding-left: 1.25rem;
    border-left: 1px solid #E2E8F0;
  }

  .mgui-gaming-pdp__highlight-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #E6F9F1;
    color: #047857;
    font-size: 1.1rem;
    flex-shrink: 0;
  }

  .mgui-gaming-pdp__highlight-item strong {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    color: #0F172A;
  }

  .mgui-gaming-pdp__highlight-item p {
    margin: 0.2rem 0 0;
    font-size: 1.05rem;
    color: #475569;
    line-height: 1.35;
  }

  .mgui-gaming-pdp__footnote {
    margin: 0.85rem 0 1.25rem;
    font-size: 1.05rem;
    color: #64748B;
  }

  .mgui-gaming-pdp__accordion {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    margin-bottom: 0.75rem;
    overflow: hidden;
  }

  .mgui-gaming-pdp__accordion-summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    font-size: 1rem;
    font-weight: 700;
    color: #0F172A;
    cursor: pointer;
  }

  .mgui-gaming-pdp__accordion-summary::-webkit-details-marker {
    display: none;
  }

  .mgui-gaming-pdp__accordion-body {
    padding: 0 1.25rem 1.25rem;
    border-top: 1px solid #F1F5F9;
  }

  .mgui-gaming-specs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.05rem;
    margin-top: 0.75rem;
  }

  .mgui-gaming-specs-table th,
  .mgui-gaming-specs-table td {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid #E2E8F0;
    text-align: left;
  }

  /* Barra móvil persistente (compra_persistente) */
  .mgui-gaming-sticky-mobile-bar {
    display: none;
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    background: #FFFFFF;
    border-top: 1px solid #CBD5E1;
    padding: 0.75rem 1.25rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.08);
  }

  .mgui-gaming-sticky-mobile-bar__price {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0F172A;
  }

  .mgui-gaming-sticky-mobile-bar__cta {
    min-height: 44px;
    padding: 0 1.35rem;
    border: 0;
    border-radius: 10px;
    background: #2CE59B;
    color: #04221B;
    font-size: 0.95rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
  }

  /* ── 6. COMPARADOR LADO A LADO (mgui-gaming-comparator — Mockup 3) ── */
  .mgui-gaming-comparator {
    width: 100%;
    background: #F1F5F9;
    color: #0F172A;
    padding-bottom: 2.5rem;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
  }

  .mgui-gaming-comparator__topbar {
    background: #FFFFFF;
    border-bottom: 1px solid #E2E8F0;
    margin-bottom: 1.35rem;
  }

  .mgui-gaming-comparator__topbar-inner {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0.75rem 1.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .mgui-gaming-comparator__breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.05rem;
    color: #64748B;
  }

  .mgui-gaming-comparator__breadcrumb a {
    color: #475569;
    text-decoration: none;
  }

  .mgui-gaming-comparator__breadcrumb strong {
    color: #0F172A;
  }

  .mgui-gaming-comparator__toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: #1E293B;
    cursor: pointer;
  }

  .mgui-gaming-comparator__switch-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
  }

  .mgui-gaming-comparator__switch-slider {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    background: #2CE59B;
    border-radius: 999px;
  }

  .mgui-gaming-comparator__switch-slider::after {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 18px;
    height: 18px;
    background: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  }

  .mgui-gaming-comparator__container {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 1.75rem;
  }

  .mgui-gaming-comparator__card {
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
  }

  .mgui-gaming-comparator__hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr 1fr;
    border-bottom: 1px solid #E2E8F0;
  }

  .mgui-gaming-comparator__intro {
    padding: 2.25rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.85rem;
    border-right: 1px solid #E2E8F0;
  }

  .mgui-gaming-comparator__title {
    margin: 0;
    font-size: clamp(1.75rem, 2.4vw, 2.25rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: #0F172A;
  }

  .mgui-gaming-comparator__accent-bar {
    display: inline-block;
    width: 48px;
    height: 5px;
    background: #2CE59B;
    border-radius: 999px;
  }

  .mgui-gaming-comparator__subtitle {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.5;
    color: #475569;
  }

  .mgui-gaming-comparator__model-card {
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
    border-right: 1px solid #E2E8F0;
  }

  .mgui-gaming-comparator__model-card:last-child {
    border-right: 0;
  }

  .mgui-gaming-comparator__model-img {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
  }

  .mgui-gaming-comparator__model-img img {
    max-height: 145px;
    width: auto;
    object-fit: contain;
  }

  .mgui-gaming-comparator__model-name {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    color: #0F172A;
  }

  .mgui-gaming-comparator__transfer-pill {
    display: inline-block;
    padding: 0.15rem 0.65rem;
    background: #E6F9F1;
    color: #047857;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 700;
  }

  .mgui-gaming-comparator__model-price {
    font-size: 1.85rem;
    font-weight: 800;
    color: #0F172A;
    line-height: 1.1;
  }

  .mgui-gaming-comparator__model-cta {
    margin-top: 0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 38px;
    padding: 0 1.35rem;
    background: #2CE59B;
    color: #04221B;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
  }

  .mgui-gaming-comparator__table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }

  .mgui-gaming-comparator__row th,
  .mgui-gaming-comparator__row td {
    padding: 0.95rem 1.5rem;
    border-bottom: 1px solid #E2E8F0;
    font-size: 1rem;
  }

  .mgui-gaming-comparator__row th {
    width: 34.4%;
    text-align: left;
    font-weight: 700;
    color: #0F172A;
    border-right: 1px solid rgba(15, 23, 42, 0.08);
  }

  .mgui-gaming-comparator__row td {
    width: 32.8%;
    text-align: center;
    color: #0F172A;
    border-right: 1px solid rgba(15, 23, 42, 0.08);
  }

  .mgui-gaming-comparator__row td:last-child {
    border-right: 0;
  }

  .mgui-gaming-comparator__row.is-different {
    background: #D6F8EB;
  }

  .mgui-gaming-comparator__row.is-different strong {
    font-size: 1.08rem;
    font-weight: 800;
    color: #042F24;
  }

  .mgui-gaming-comparator__row.is-equal-confirmed {
    background: #F8FAFC;
  }

  .mgui-gaming-comparator__row--extra {
    display: none;
  }

  .mgui-gaming-comparator__fluid-banner {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, #064E3B 0%, #047857 70%, #065F46 100%);
    color: #FFFFFF;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .mgui-gaming-comparator__fluid-copy {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    font-size: 0.98rem;
  }

  .mgui-gaming-comparator__fluid-copy strong {
    color: #6EE7B7;
    font-weight: 800;
  }

  .mgui-gaming-comparator__fluid-stripe {
    width: 90px;
    height: 18px;
    background: repeating-linear-gradient(
      -45deg,
      #2CE59B,
      #2CE59B 10px,
      transparent 10px,
      transparent 20px
    );
    opacity: 0.75;
  }

  .mgui-gaming-comparator__reco-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    padding: 1.25rem 1.75rem;
    background: #F8FAFC;
  }

  .mgui-gaming-comparator__reco-card {
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.95rem;
  }

  .mgui-gaming-comparator__reco-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #E6F9F1;
    color: #047857;
    font-size: 1.25rem;
    flex-shrink: 0;
  }

  .mgui-gaming-comparator__reco-card strong {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
    color: #0F172A;
  }

  .mgui-gaming-comparator__reco-card p {
    margin: 0.15rem 0 0;
    font-size: 1.05rem;
    color: #475569;
  }

  .mgui-gaming-comparator__footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
    padding: 0 0.25rem;
  }

  .mgui-gaming-comparator__footnote {
    margin: 0;
    font-size: 1.05rem;
    color: #64748B;
  }

  .mgui-gaming-comparator__footer-links {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-size: 1.05rem;
  }

  .mgui-gaming-comparator__footer-links a {
    color: #0F172A;
    font-weight: 600;
    text-decoration: none;
  }

  .mgui-gaming-comparator__footer-links a:hover {
    color: #047857;
    text-decoration: underline;
  }

  /* Diagnóstico pre-publicación discreto al pie en modo vista previa */
  .mgui-gaming-prepublish-warnings {
    max-width: 1340px;
    margin: 1.5rem auto;
    padding: 0.75rem 1.25rem;
    background: #F8FAFC;
    border: 1px dashed #CBD5E1;
    border-radius: 10px;
    color: #475569;
    font-size: 1.05rem;
  }

  .mgui-gaming-prepublish-warnings__summary {
    cursor: pointer;
    font-weight: 600;
    color: #475569;
  }

  /* ── 7. ADAPTACIÓN MÓVIL Y BREAKPOINT MOBILE EN EL EDITOR STUDIO (Mockup 2) ── */
  @media (max-width: 900px) {
    .mgui-gaming-header__burger {
      display: inline-flex;
    }
    .mgui-gaming-header__nav,
    .mgui-gaming-header__search,
    .mgui-gaming-header__divider {
      display: none;
    }
    .mgui-gaming-header__inner {
      justify-content: space-between;
      padding: 0 1rem;
    }
    .mgui-gaming-hero__grid,
    .mgui-gaming-product-grid,
    .mgui-gaming-product-card,
    .mgui-gaming-trust-footer__inner,
    .mgui-gaming-pdp__first-screen,
    .mgui-gaming-pdp__highlights,
    .mgui-gaming-comparator__hero-grid,
    .mgui-gaming-comparator__reco-grid {
      grid-template-columns: 1fr;
    }
    .mgui-gaming-product-card__body {
      border-left: 0;
      border-top: 1px solid #E2E8F0;
      padding-left: 0;
      padding-top: 1rem;
    }
    .mgui-gaming-sticky-mobile-bar {
      display: flex;
    }
  }

  [data-breakpoint="mobile"] .mgui-gaming-header__burger,
  [data-studio-viewport="mobile"] .mgui-gaming-header__burger {
    display: inline-flex;
  }

  [data-breakpoint="mobile"] .mgui-gaming-header__nav,
  [data-breakpoint="mobile"] .mgui-gaming-header__search,
  [data-breakpoint="mobile"] .mgui-gaming-header__divider,
  [data-studio-viewport="mobile"] .mgui-gaming-header__nav,
  [data-studio-viewport="mobile"] .mgui-gaming-header__search,
  [data-studio-viewport="mobile"] .mgui-gaming-header__divider {
    display: none;
  }

  [data-breakpoint="mobile"] .mgui-gaming-header__inner,
  [data-studio-viewport="mobile"] .mgui-gaming-header__inner {
    justify-content: space-between;
    padding: 0 1rem;
  }

  [data-breakpoint="mobile"] .mgui-gaming-hero__grid,
  [data-breakpoint="mobile"] .mgui-gaming-product-grid,
  [data-breakpoint="mobile"] .mgui-gaming-product-card,
  [data-breakpoint="mobile"] .mgui-gaming-trust-footer__inner,
  [data-breakpoint="mobile"] .mgui-gaming-pdp__first-screen,
  [data-breakpoint="mobile"] .mgui-gaming-pdp__highlights,
  [data-breakpoint="mobile"] .mgui-gaming-comparator__hero-grid,
  [data-breakpoint="mobile"] .mgui-gaming-comparator__reco-grid,
  [data-studio-viewport="mobile"] .mgui-gaming-hero__grid,
  [data-studio-viewport="mobile"] .mgui-gaming-product-grid,
  [data-studio-viewport="mobile"] .mgui-gaming-product-card,
  [data-studio-viewport="mobile"] .mgui-gaming-trust-footer__inner,
  [data-studio-viewport="mobile"] .mgui-gaming-pdp__first-screen,
  [data-studio-viewport="mobile"] .mgui-gaming-pdp__highlights,
  [data-studio-viewport="mobile"] .mgui-gaming-comparator__hero-grid,
  [data-studio-viewport="mobile"] .mgui-gaming-comparator__reco-grid {
    grid-template-columns: 1fr;
  }

  [data-breakpoint="mobile"] .mgui-gaming-sticky-mobile-bar,
  [data-studio-viewport="mobile"] .mgui-gaming-sticky-mobile-bar {
    display: flex;
  }
  /* No añadir .hidden global ni selectores que afecten otros portales. */
  .mv-sitio .mv-pdp-seccion-divisor { border-top: 1px solid #ededed; padding-top: 24px; }
  .mv-sitio .mv-pdp-subtitulo { font-size: 20px; font-weight: 600; margin: 0; }
  .mv-sitio .mv-pdp-descripcion-texto { color: #666; font-size: 16px; line-height: 1.5; white-space: pre-line; }
  .mv-sitio .mv-pdp-pregunta-item { padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
  .mv-sitio .mv-pdp-pregunta-item > p { margin: 0; }
  .mv-sitio .mv-pdp-pregunta-item > p.mv-secundario { margin: 4px 0 0 12px; }

  /* ═══════════════════════════════════════════════════════════════════════════
   * TEMA DE TIENDA OFICIAL: MERCADOHERRAJES (TENANT 1 · herrajes.mercadoventas.com.ar / mercadoherrajes.com.ar)
   * Paleta oficial Tokens_MercadoHerrajes.json:
   * - Azul profundo: #0B1F4D
   * - Azul eléctrico: #0066FF
   * - Cobre cepillado: #C8753D
   * - Cobre texto (AA sobre claro): #8A451F
   * - Cian técnico: #17C8E8
   * - Acero satinado: #A8B3C2
   * - Hielo metálico: #F2F6FB
   * - Grafito industrial: #263447
   * - Blanco puro: #FFFFFF
   * ═══════════════════════════════════════════════════════════════════════════ */
  .mv-sitio [data-mg-vd-tema="mercadoherrajes"] {
    --mh-azul-profundo: #0B1F4D;
    --mh-azul-electrico: #0066FF;
    --mh-azul-electrico-hover: #0052CC;
    --mh-cobre: #C8753D;
    --mh-cobre-claro: #DF8E57;
    --mh-cobre-oscuro: #9A5226;
    --mh-cobre-texto: #8A451F;
    --mh-cian: #17C8E8;
    --mh-acero: #A8B3C2;
    --mh-hielo: #F2F6FB;
    --mh-grafito: #263447;
    --mh-blanco: #FFFFFF;
    --mh-borde-suave: #DCE5F2;
    --mh-sombra-1: 0 1px 2px rgba(11, 31, 77, 0.06), 0 4px 12px rgba(11, 31, 77, 0.05);
    --mh-sombra-2: 0 8px 24px rgba(11, 31, 77, 0.10), 0 2px 6px rgba(11, 31, 77, 0.06);
    --mv-azul-900: #0B1F4D;
    --mv-azul-700: #263447;
    --mv-azul-500: #0066FF;
    --mv-cian-400: #17C8E8;
    --mv-superficie-2: #F2F6FB;
    --mv-borde: #DCE5F2;
    background-color: var(--mh-hielo);
    color: var(--mh-azul-profundo);
    font-variant-numeric: tabular-nums;
  }

  .mv-sitio [data-mg-vd-tema="mercadoherrajes"] .mh-cabecera-tienda {
    background: var(--mh-blanco);
    border-bottom: 1px solid var(--mh-borde-suave);
    box-shadow: var(--mh-sombra-1);
    padding-block: 0.55rem;
  }

  .mv-sitio [data-mg-vd-tema="mercadoherrajes"] .mh-cabecera-tienda__interior {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
  }

  .mv-sitio [data-mg-vd-tema="mercadoherrajes"] .mh-marca {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
  }

  .mv-sitio [data-mg-vd-tema="mercadoherrajes"] .mh-marca__logo {
    block-size: 52px;
    inline-size: auto;
    object-fit: contain;
  }

  .mv-sitio [data-mg-vd-tema="mercadoherrajes"] .mh-familias-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
  }

  .mv-sitio [data-mg-vd-tema="mercadoherrajes"] .mh-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-block-size: 36px;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background: var(--mh-blanco);
    border: 1px solid var(--mh-borde-suave);
    color: var(--mh-grafito);
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
  }

  .mv-sitio [data-mg-vd-tema="mercadoherrajes"] .mh-chip:hover {
    border-color: var(--mh-azul-electrico);
    color: var(--mh-azul-electrico);
  }

  .mv-sitio [data-mg-vd-tema="mercadoherrajes"] .mh-chip--activo {
    background: var(--mh-azul-profundo);
    border-color: var(--mh-azul-profundo);
    color: var(--mh-blanco);
  }

  .mv-sitio [data-mg-vd-tema="mercadoherrajes"] .mh-hero {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    padding: clamp(1.25rem, 3vw, 2.25rem);
    background:
      radial-gradient(900px 420px at 88% 18%, rgba(23, 200, 232, 0.22), transparent 60%),
      radial-gradient(700px 380px at 14% 92%, rgba(200, 117, 61, 0.20), transparent 55%),
      linear-gradient(135deg, #071535 0%, #0B1F4D 52%, #132F6B 100%);
    color: var(--mh-blanco);
    box-shadow: var(--mh-sombra-2);
    display: grid;
    grid-template-columns: 1.35fr 0.65fr;
    gap: 1.5rem;
    align-items: center;
  }

  .mv-sitio [data-mg-vd-tema="mercadoherrajes"] .mh-hero__contenido {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .mv-sitio [data-mg-vd-tema="mercadoherrajes"] .mh-hero__insignias {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .mv-sitio [data-mg-vd-tema="mercadoherrajes"] .mh-insignia {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .mv-sitio [data-mg-vd-tema="mercadoherrajes"] .mh-insignia--cobre {
    background: rgba(200, 117, 61, 0.22);
    color: #FFD7BA;
    border: 1px solid rgba(223, 142, 87, 0.45);
  }

  .mv-sitio [data-mg-vd-tema="mercadoherrajes"] .mh-insignia--cian {
    background: rgba(23, 200, 232, 0.16);
    color: #8CF0FF;
    border: 1px solid rgba(23, 200, 232, 0.4);
  }

  .mv-sitio [data-mg-vd-tema="mercadoherrajes"] .mh-hero__titulo {
    font-size: clamp(1.75rem, 2.8vw, 2.5rem);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--mh-blanco);
    margin: 0;
  }

  .mv-sitio [data-mg-vd-tema="mercadoherrajes"] .mh-hero__subtitulo {
    color: #DCE5F2;
    font-size: 0.96rem;
    line-height: 1.5;
    max-inline-size: 62ch;
    margin: 0;
  }

  .mv-sitio [data-mg-vd-tema="mercadoherrajes"] .mh-hero__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-block-start: 0.25rem;
  }

  .mv-sitio [data-mg-vd-tema="mercadoherrajes"] .mh-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-block-size: 42px;
    padding: 0.55rem 1.1rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color 140ms ease, transform 140ms ease;
  }

  .mv-sitio [data-mg-vd-tema="mercadoherrajes"] .mh-boton--primario {
    background: var(--mh-azul-electrico);
    color: var(--mh-blanco);
  }

  .mv-sitio [data-mg-vd-tema="mercadoherrajes"] .mh-boton--primario:hover {
    background: var(--mh-azul-electrico-hover);
  }

  .mv-sitio [data-mg-vd-tema="mercadoherrajes"] .mh-boton--cobre {
    background: linear-gradient(135deg, #DF8E57 0%, #C8753D 55%, #9A5226 100%);
    color: var(--mh-blanco);
  }

  .mv-sitio [data-mg-vd-tema="mercadoherrajes"] .mh-hero__emblema {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .mv-sitio [data-mg-vd-tema="mercadoherrajes"] .mh-hero__emblema img {
    max-inline-size: 210px;
    block-size: auto;
    filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.35));
  }

  .mv-sitio [data-mg-vd-tema="mercadoherrajes"] .mv-producto {
    border-color: var(--mh-borde-suave);
    border-radius: 14px;
    box-shadow: var(--mh-sombra-1);
  }

  .mv-sitio [data-mg-vd-tema="mercadoherrajes"] .mv-producto:hover {
    border-color: rgba(0, 102, 255, 0.38);
    box-shadow: var(--mh-sombra-2);
  }

  @media (max-width: 860px) {
    .mv-sitio [data-mg-vd-tema="mercadoherrajes"] .mh-hero {
      grid-template-columns: 1fr;
    }
    .mv-sitio [data-mg-vd-tema="mercadoherrajes"] .mh-hero__emblema img {
      max-inline-size: 140px;
    }
  }

  /* Autocompletado predictivo de direcciones (Georef + OpenStreetMap) */
  .mv-campo-direccion-wrap {
    position: relative;
  }

  .mv-sugerencias-direccion {
    position: absolute;
    inset-block-start: calc(100% + 4px);
    inset-inline: 0;
    z-index: 60;
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
    max-block-size: 280px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }

  .mv-sugerencia-item {
    appearance: none;
    background: transparent;
    border: 0;
    border-block-end: 1px solid #F1F5F9;
    padding: 0.65rem 0.85rem;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font: inherit;
    color: #0F172A;
    transition: background-color 120ms ease;
  }

  .mv-sugerencia-item:last-child {
    border-block-end: 0;
  }

  .mv-sugerencia-item:hover,
  .mv-sugerencia-item:focus-visible {
    background: #EFF6FF;
  }

  .mv-sugerencia-item strong {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0F172A;
  }

  .mv-sugerencia-item .mv-secundario {
    font-size: 0.95rem;
    color: #475569;
  }
}

@layer mv.accesibilidad {
  .mv-sitio :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible { outline: 3px solid var(--mv-foco); outline-offset: 3px; box-shadow: 0 0 0 3px #FFF; }
  .mv-sitio .mv-solo-lectores { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .mv-sitio .mv-saltar { position: absolute; inset-block-start: .5rem; inset-inline-start: 1rem; z-index: 100; padding: .75rem 1rem; background: #FFF; color: #071B52; border-radius: .5rem; transform: translateY(-200%); }
  .mv-sitio .mv-saltar:focus { transform: translateY(0); }
  .mv-sitio [hidden] { display: none; }
  .mv-sitio :where([id]) { scroll-margin-block-start: 1rem; }
  @media (prefers-reduced-motion: reduce) {
    .mv-sitio *, .mv-sitio *::before, .mv-sitio *::after { animation: none; transition: none; scroll-behavior: auto; }
  }
  @media (forced-colors: active) {
    .mv-sitio :where(.mv-boton,.mv-boton-icono,.mv-campo,.mv-etiqueta,.mv-panel,.mv-producto) { border: 1px solid ButtonText; }
    .mv-sitio :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible { outline: 3px solid Highlight; box-shadow: none; }
  }
  @media print {
    .mv-sitio { color: #000; background: #FFF; }
    .mv-sitio :where(.mv-cabecera,.mv-pie,.mv-acciones,.mv-compra-fija,.mv-saltar) { display: none; }
    .mv-sitio :where(.mv-panel,.mv-producto,.mv-portada) { box-shadow: none; color: #000; background: #FFF; break-inside: avoid; }
  }
}

.mgui-studio-brand-logo {
  width: 34px !important;
  height: 34px !important;
  object-fit: contain;
}
.mgui-studio-brand-svg {
  width: 46px !important;
  height: 46px !important;
  object-fit: contain;
}
.mg-brand-word--p09 .mg-brand-word__p1 {
  color: #8B2F83;
  font-weight: 800;
}
.mg-brand-word--p09 .mg-brand-word__p2 {
  color: #D98A16;
  font-weight: 800;
}
.mgui-studio-header .mg-brand-word--p09 .mg-brand-word__p1 {
  color: #E078D8;
}
.mgui-studio-header .mg-brand-word--p09 .mg-brand-word__p2 {
  color: #F5AA37;
}

/* ── INICIO mercadostudio-v2.css ── */
/**
 * MercadoStudio v2 — Hoja de Estilos Oficial del Editor Visual, Componentes v1 y Pantallas de Gestión
 * Cumple 100 % con `style-src 'self'` (cero estilos inline), `docs/design-system.md` (`p09-sol-petroleo`)
 * y `docs/mercadostudio-editor-kit/docs/02_especificacion_ux_ui_mercadostudio.md` (wireframes `ms_01` a `ms_04`).
 */

:root {
  --ms-bg: #EEF0F4;
  --ms-stage-bg: #EEF0F4;
  --ms-panel: #FFFFFF;
  --ms-panel-bg: #FFFFFF;
  --ms-panel-subtle: #FAFBFC;
  --ms-line: #E2E5EB;
  --ms-border: #E2E5EB;
  --ms-ink: #1B1F2A;
  --ms-mute: #6B7280;
  --ms-muted: #6B7280;
  --ms-acc: #0E9F6E;
  --ms-accent: #0E9F6E;
  --ms-acc2: #E8F7F1;
  --ms-accent-soft: #E8F7F1;
  --ms-sel: #2563EB;
  --ms-select-blue: #2563EB;
  --ms-glob: #10B981;
  --ms-global-green: #10B981;
  --ms-note: #F59E0B;
  --ms-sol: #F59E0B;
  --ms-topbar-bg: #141821;
  --ms-topbar-pill: #232936;
  --ms-guide-magenta: #FF2D78;
  --ms-danger: #DC2626;
  --ms-cms-purple: #7C3AED;
  --ms-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --ms-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Tokens por defecto del documento en el lienzo (sobreescritos por el compilador CSS del sitio) */
  --ms-site-color1: #FFFFFF;
  --ms-site-color2: #F7F8FA;
  --ms-site-color3: #CBD5E1;
  --ms-site-color4: #475569;
  --ms-site-color5: #1B1F2A;
  --ms-site-accent: #0E9F6E;
  --ms-site-font-heading: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --ms-site-font-body: 'Inter', system-ui, sans-serif;
  --ms-site-max-width: 1600px;
}

/* ==========================================================================
   1. SHELL GENERAL DEL EDITOR (100dvh, ms_01_estructura_general_editor.png)
   ========================================================================== */

body.ms-editor-body,
.ms-editor-shell {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100dvh;
  background: var(--ms-bg);
  color: var(--ms-ink);
  font-family: var(--ms-font-ui);
  font-size: 16px;
  line-height: 1.4;
  overflow: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

.ms-editor-shell *,
.ms-editor-shell *::before,
.ms-editor-shell *::after,
.ms-portal-shell *,
.ms-portal-shell *::before,
.ms-portal-shell *::after {
  box-sizing: border-box;
}

.ms-hidden,
[hidden] {
  display: none !important;
}

.ms-desktop-notice {
  display: none;
  position: fixed;
  bottom: 42px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  background: var(--ms-topbar-bg);
  color: #FFFFFF;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 15px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

@media (max-width: 1023px) {
  .ms-desktop-notice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
}

/* ==========================================================================
   2. BARRA SUPERIOR FIJA (.ms-top, 52px, #141821)
   ========================================================================== */

.ms-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 52px;
  background: var(--ms-topbar-bg);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 12px;
  font-size: 16px;
  z-index: 60;
  user-select: none;
}

.ms-logo {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0E9F6E, #34D399);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 15px;
  color: #FFFFFF;
  text-decoration: none;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(14, 159, 110, 0.35);
}

.ms-top-menus {
  display: flex;
  align-items: center;
  gap: 2px;
}

.ms-top-menu-wrap {
  position: relative;
}

.ms-top-menu-btn {
  background: transparent;
  color: #E5E7EB;
  border: 0;
  padding: 6px 9px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
}

.ms-top-menu-btn:hover,
.ms-top-menu-btn[aria-expanded="true"] {
  background: var(--ms-topbar-pill);
  color: #FFFFFF;
}

.ms-top-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 230px;
  background: #1B202C;
  color: #F3F4F6;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.36);
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 90;
}

.ms-top-menu-wrap:hover .ms-top-dropdown,
.ms-top-menu-wrap:focus-within .ms-top-dropdown,
.ms-top-dropdown.is-open {
  display: flex;
}

.ms-top-dropdown-item {
  background: transparent;
  color: #E5E7EB;
  border: 0;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 15px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
}

.ms-top-dropdown-item:hover {
  background: #283042;
  color: #FFFFFF;
}

.ms-top-dropdown-item kbd {
  font-family: var(--ms-font-mono);
  font-size: 15px;
  color: #9CA3AF;
}

.ms-top-dropdown-sep {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 0;
}

.ms-pill {
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--ms-topbar-pill);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 15px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  white-space: nowrap;
}

.ms-pill:hover {
  background: #2C3344;
}

.ms-save-status {
  color: #9CA3AF;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.ms-save-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ms-glob);
  display: inline-block;
}

.ms-save-status[data-state="saving"] .ms-save-dot {
  background: var(--ms-note);
}

.ms-save-status[data-state="error"] .ms-save-dot {
  background: var(--ms-danger);
}

.ms-top-center {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ms-bp {
  display: flex;
  gap: 6px;
  align-items: center;
}

.ms-bp-btn {
  width: 30px;
  height: 28px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: var(--ms-topbar-pill);
  color: #D1D5DB;
  border: 0;
  cursor: pointer;
  font-size: 16px;
  padding: 0;
  transition: background 120ms ease, color 120ms ease;
}

.ms-bp-btn:hover {
  background: #2D3548;
  color: #FFFFFF;
}

.ms-bp-btn.is-on,
.ms-bp-btn[aria-pressed="true"] {
  background: var(--ms-acc);
  color: #FFFFFF;
}

.ms-bp-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

.ms-pub {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}

.ms-icon-top-btn {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: transparent;
  color: #D1D5DB;
  border: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.ms-icon-top-btn:hover {
  background: var(--ms-topbar-pill);
  color: #FFFFFF;
}

.ms-icon-top-btn svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

.ms-btn-pub {
  background: var(--ms-acc);
  color: #FFFFFF;
  padding: 7px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  transition: filter 120ms ease;
}

.ms-btn-pub:hover {
  filter: brightness(1.08);
}

/* ==========================================================================
   3. POPOVER DE BREAKPOINTS (.ms-bp-popover, ms_04_breakpoints_responsive.png)
   ========================================================================== */

.ms-bp-popover {
  position: absolute;
  top: 58px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 75;
  background: #141821;
  color: #FFFFFF;
  border-radius: 12px;
  padding: 14px;
  width: 320px;
  font-size: 15px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: none;
  flex-direction: column;
  gap: 6px;
}

.ms-bp-popover.is-open,
.ms-bp-popover[data-open="true"] {
  display: flex;
}

.ms-bp-popover-title {
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
}

.ms-bp-popover-sub {
  color: #9CA3AF;
  font-size: 15px;
  padding-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ms-bp-popover-item {
  padding: 8px 10px;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  color: #E5E7EB;
  border: 0;
  width: 100%;
  font-size: 15px;
  cursor: pointer;
  font-family: inherit;
}

.ms-bp-popover-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.ms-bp-popover-item.is-on {
  background: #232936;
  color: #FFFFFF;
  font-weight: 600;
}

.ms-bp-popover-add {
  color: #34D399;
  background: transparent;
  border: 0;
  padding: 8px 10px 4px;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

/* ==========================================================================
   4. RAIL IZQUIERDO DE 14 ÍCONOS (.ms-rail, 56px)
   ========================================================================== */

.ms-rail {
  position: absolute;
  top: 52px;
  left: 0;
  width: 56px;
  bottom: 0;
  background: var(--ms-panel);
  border-right: 1px solid var(--ms-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  gap: 4px;
  z-index: 50;
}

.ms-rail-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--ms-mute);
  background: transparent;
  border: 0;
  cursor: pointer;
  position: relative;
  padding: 0;
  transition: background 120ms ease, color 120ms ease;
}

.ms-rail-btn:hover {
  background: #F3F4F6;
  color: var(--ms-ink);
}

.ms-rail-btn.is-on,
.ms-rail-btn[aria-expanded="true"] {
  background: var(--ms-acc2);
  color: var(--ms-acc);
}

.ms-rail-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ms-rail-sep {
  width: 26px;
  height: 1px;
  background: var(--ms-line);
  margin: 2px 0;
  flex-shrink: 0;
}

.ms-rail-spacer {
  margin-top: auto;
}

.ms-rail-btn[data-ms-tooltip]:hover::after {
  content: attr(data-ms-tooltip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: #141821;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 500;
  padding: 5px 9px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 80;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}

/* ==========================================================================
   5. FLYOUTS DEL RAIL IZQUIERDO (.ms-flyout, ms_02_panel_agregar_flyout.png)
   ========================================================================== */

.ms-flyout {
  position: absolute;
  top: 52px;
  left: 56px;
  width: 360px;
  bottom: 0;
  background: var(--ms-panel);
  border-right: 1px solid var(--ms-line);
  box-shadow: 8px 0 24px rgba(0, 0, 0, 0.08);
  display: none;
  flex-direction: column;
  z-index: 40;
  overflow: hidden;
}

.ms-flyout.is-open,
.ms-flyout[data-open="true"] {
  display: flex;
}

.ms-flyout--agregar,
.ms-flyout[data-ms-flyout="agregar"] {
  width: 560px;
}

.ms-flyout--paginas.has-subpanel,
.ms-flyout[data-ms-flyout="paginas"] {
  width: 680px;
}

.ms-flyout--mapa,
.ms-flyout[data-ms-flyout="mapa"] {
  width: 760px;
}

.ms-flyout--tema,
.ms-flyout[data-ms-flyout="tema"] {
  width: 400px;
}

.ms-flyout--medios,
.ms-flyout[data-ms-flyout="medios"] {
  width: 460px;
}

.ms-flyout-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ms-line);
  flex-shrink: 0;
  background: #FFFFFF;
}

.ms-flyout-hd b,
.ms-flyout-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ms-ink);
}

.ms-search {
  margin-left: auto;
  width: 220px;
  height: 34px;
  border: 1px solid var(--ms-line);
  border-radius: 8px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ms-mute);
  font-size: 15px;
  background: #FFFFFF;
}

.ms-search input {
  border: 0;
  outline: none;
  background: transparent;
  width: 100%;
  font-size: 15px;
  color: var(--ms-ink);
  font-family: inherit;
}

.ms-flyout-icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: var(--ms-mute);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 16px;
}

.ms-flyout-icon-btn:hover {
  background: #F3F4F6;
  color: var(--ms-ink);
}

.ms-flyout-bd {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.ms-flyout-scroll {
  flex: 1;
  padding: 16px 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Panel Agregar: columna de 17 categorías + grilla de 3 columnas */
.ms-cats {
  width: 190px;
  border-right: 1px solid var(--ms-line);
  padding: 8px 0;
  font-size: 16px;
  overflow-y: auto;
  flex-shrink: 0;
  background: #FFFFFF;
}

.ms-cat-item {
  display: block;
  width: 100%;
  padding: 8px 18px;
  color: #374151;
  background: transparent;
  border: 0;
  text-align: left;
  font-size: 16px;
  cursor: pointer;
  font-family: inherit;
}

.ms-cat-item:hover {
  background: #F9FAFB;
}

.ms-cat-item.is-on,
.ms-cats .on {
  background: var(--ms-acc2);
  color: var(--ms-acc);
  font-weight: 600;
}

.ms-cats hr {
  border: 0;
  border-top: 1px solid var(--ms-line);
  margin: 6px 0;
}

.ms-tiles {
  flex: 1;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-content: start;
  overflow-y: auto;
}

.ms-sub {
  grid-column: 1 / -1;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ms-mute);
  margin-top: 6px;
}

.ms-sub:first-child {
  margin-top: 0;
}

.ms-tile {
  height: 96px;
  border: 1px solid var(--ms-line);
  border-radius: 10px;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  color: #374151;
  cursor: grab;
  padding: 8px;
  text-align: center;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  font-family: inherit;
}

.ms-tile svg {
  width: 26px;
  height: 26px;
  stroke: #1B1F2A;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ms-tile:hover,
.ms-tile.is-hov,
.ms-tile.hov {
  border-color: var(--ms-acc);
  box-shadow: 0 0 0 3px var(--ms-acc2);
}

.ms-tile--section {
  grid-column: 1 / -1;
  height: auto;
  min-height: 76px;
  flex-direction: row;
  justify-content: space-between;
  text-align: left;
  padding: 12px 14px;
}

.ms-tile-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ms-tile-meta strong {
  font-size: 15px;
  color: var(--ms-ink);
}

.ms-tile-meta span {
  font-size: 15px;
  color: var(--ms-mute);
}

/* Subpanel de Ajustes de Página y SEO con Vista Previa de Google */
.ms-pages-main {
  width: 300px;
  border-right: 1px solid var(--ms-line);
  padding: 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ms-pages-subpanel {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  background: #FAFBFC;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ms-page-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--ms-line);
  background: #FFFFFF;
  font-size: 15px;
  cursor: pointer;
}

.ms-page-item.is-active {
  border-color: var(--ms-acc);
  background: var(--ms-acc2);
  color: var(--ms-acc);
  font-weight: 600;
}

.ms-google-serp {
  background: #FFFFFF;
  border: 1px solid var(--ms-line);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ms-google-serp-url {
  font-size: 15px;
  color: #0F766E;
}

.ms-google-serp-title {
  font-size: 15px;
  font-weight: 600;
  color: #1D4ED8;
}

.ms-google-serp-desc {
  font-size: 15px;
  color: #4B5563;
  line-height: 1.45;
}

/* Árbol de Capas (.ms-layer-tree) */
.ms-layer-tree {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ms-layer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 15px;
  color: var(--ms-ink);
  cursor: pointer;
  border: 1px solid transparent;
}

.ms-layer-row:hover {
  background: #F3F4F6;
}

.ms-layer-row.is-selected {
  background: #EFF6FF;
  border-color: #BFDBFE;
  color: var(--ms-sel);
  font-weight: 600;
}

.ms-layer-row[data-depth="1"] {
  padding-left: 22px;
}

.ms-layer-row[data-depth="2"] {
  padding-left: 36px;
}

.ms-layer-row[data-depth="3"] {
  padding-left: 50px;
}

.ms-layer-actions {
  margin-left: auto;
  display: inline-flex;
  gap: 4px;
  color: var(--ms-mute);
}

/* Mapa del sitio visual en columnas (.ms-sitemap-grid) */
.ms-sitemap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}

.ms-sitemap-col {
  background: #FAFBFC;
  border: 1px solid var(--ms-line);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ms-sitemap-sec-pill {
  background: #FFFFFF;
  border: 1px solid var(--ms-line);
  border-radius: 7px;
  padding: 8px 10px;
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Tema del sitio (.ms-theme-swatches) */
.ms-theme-swatches {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.ms-theme-token-card {
  border: 1px solid var(--ms-line);
  border-radius: 8px;
  padding: 8px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ms-swatch-preview {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--ms-line);
  flex-shrink: 0;
}

.ms-swatch-preview[data-token="color1"] { background: var(--ms-site-color1); }
.ms-swatch-preview[data-token="color2"] { background: var(--ms-site-color2); }
.ms-swatch-preview[data-token="color3"] { background: var(--ms-site-color3); }
.ms-swatch-preview[data-token="color4"] { background: var(--ms-site-color4); }
.ms-swatch-preview[data-token="color5"] { background: var(--ms-site-color5); }
.ms-swatch-preview[data-token="accent"] { background: var(--ms-site-accent); }

/* ==========================================================================
   6. LIENZO CENTRAL (.ms-canvas-wrap) Y MARCO DEL SITIO (.ms-page-frame)
   ========================================================================== */

.ms-canvas-wrap {
  position: absolute;
  top: 52px;
  left: 56px;
  right: 300px;
  bottom: 34px;
  background: var(--ms-bg);
  padding: 22px 28px 64px;
  overflow: auto;
}

.ms-canvas-stage {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  transition: max-width 180ms ease;
}

.ms-editor-shell[data-ms-bp="tablet"] .ms-canvas-stage {
  max-width: 860px;
}

.ms-editor-shell[data-ms-bp="mobile"] .ms-canvas-stage {
  max-width: 390px;
}

.ms-bp-vertical-label {
  position: absolute;
  left: -24px;
  top: 44px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 15px;
  font-weight: 600;
  color: var(--ms-mute);
  background: #FFFFFF;
  border: 1px solid var(--ms-line);
  border-radius: 6px;
  padding: 8px 4px;
  letter-spacing: 0.03em;
  user-select: none;
}

.ms-page-frame {
  background: #FFFFFF;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  min-height: calc(100dvh - 134px);
  position: relative;
  border: 1px solid var(--ms-line);
}

.ms-url-bar {
  height: 34px;
  border-bottom: 1px solid var(--ms-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--ms-mute);
  gap: 8px;
  background: #FFFFFF;
  border-radius: 6px 6px 0 0;
}

.ms-url-bar b,
.ms-url-bar a {
  color: var(--ms-acc);
  font-weight: 600;
  text-decoration: none;
}

.ms-site-root {
  position: relative;
  width: 100%;
  background: var(--ms-site-color1);
  color: var(--ms-site-color5);
  font-family: var(--ms-site-font-body);
}

/* ==========================================================================
   7. OVERLAYS DE SELECCIÓN, TOOLBAR FLOTANTE, CHIP Y DRAG & DROP
   ========================================================================== */

.ms-node {
  position: relative;
  transition: outline-color 100ms ease;
}

.ms-editor-shell .ms-node:hover {
  outline: 1px dashed rgba(37, 99, 235, 0.55);
  outline-offset: -1px;
}

.ms-sel-outline,
.ms-editor-shell .ms-node.is-selected {
  outline: 2px solid var(--ms-sel) !important;
  outline-offset: -2px;
}

.ms-sel-global,
.ms-editor-shell .ms-node--global.is-selected,
.ms-editor-shell [data-ms-global="true"].is-selected {
  outline: 2px solid var(--ms-glob) !important;
  outline-offset: -2px;
}

.ms-chip {
  position: absolute;
  top: 50%;
  left: 38%;
  background: var(--ms-sel);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  z-index: 26;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.28);
}

.ms-chip--global {
  background: var(--ms-glob);
}

.ms-chip-up {
  background: rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  border: 0;
  border-radius: 3px;
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  font-size: 15px;
  line-height: 1;
}

.ms-handle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid var(--ms-sel);
  z-index: 27;
}

.ms-handle--nw { top: -4px; left: -4px; cursor: nwse-resize; }
.ms-handle--n  { top: -4px; left: calc(50% - 4px); cursor: ns-resize; }
.ms-handle--ne { top: -4px; right: -4px; cursor: nesw-resize; }
.ms-handle--e  { top: calc(50% - 4px); right: -4px; cursor: ew-resize; }
.ms-handle--se { bottom: -4px; right: -4px; cursor: nwse-resize; }
.ms-handle--s  { bottom: -4px; left: calc(50% - 4px); cursor: ns-resize; }
.ms-handle--sw { bottom: -4px; left: -4px; cursor: nesw-resize; }
.ms-handle--w  { top: calc(50% - 4px); left: -4px; cursor: ew-resize; }

.ms-handle--padding {
  border-radius: 2px;
  border-color: var(--ms-acc);
  top: 8px;
  left: calc(50% - 4px);
}

.ms-floating-tb {
  position: absolute;
  top: 320px;
  left: 38%;
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
  border: 1px solid var(--ms-line);
  display: flex;
  align-items: center;
  font-size: 16px;
  height: 42px;
  z-index: 28;
}

.ms-floating-tb-btn {
  padding: 0 14px;
  height: 100%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-right: 1px solid var(--ms-line);
  background: transparent;
  color: var(--ms-ink);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}

.ms-floating-tb-btn:last-child {
  border-right: 0;
}

.ms-floating-tb-btn:hover {
  background: #F9FAFB;
  color: var(--ms-acc);
}

.ms-more-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 240px;
  background: #FFFFFF;
  border: 1px solid var(--ms-line);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 35;
}

.ms-more-menu.is-open {
  display: flex;
}

.ms-more-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: var(--ms-ink);
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.ms-more-item:hover {
  background: #F3F4F6;
}

.ms-more-item--danger {
  color: var(--ms-danger);
}

.ms-add-section-btn {
  position: absolute;
  left: 50%;
  bottom: -15px;
  transform: translateX(-50%);
  background: var(--ms-sel);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  border: 2px solid #FFFFFF;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28);
  cursor: pointer;
  z-index: 25;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}

.ms-dnd-ghost {
  position: absolute;
  left: 52%;
  top: 340px;
  width: 150px;
  height: 96px;
  border: 2px dashed var(--ms-acc);
  border-radius: 10px;
  background: rgba(14, 159, 110, 0.08);
  display: none;
  place-items: center;
  font-size: 15px;
  color: var(--ms-acc);
  font-weight: 600;
  z-index: 30;
  pointer-events: none;
}

.ms-dnd-ghost.is-visible {
  display: grid;
}

.ms-dnd-dropline {
  position: absolute;
  left: 35%;
  top: 446px;
  width: 300px;
  height: 4px;
  background: var(--ms-acc);
  border-radius: 2px;
  display: none;
  z-index: 30;
  pointer-events: none;
}

.ms-dnd-dropline.is-visible {
  display: block;
}

.ms-smart-guides {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 29;
}

.ms-smart-guides line {
  stroke: var(--ms-guide-magenta);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

.ms-tip-popover {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 320px;
  background: #141821;
  color: #FFFFFF;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ms-tip-popover h4 {
  margin: 0;
  font-size: 16px;
  color: #34D399;
}

.ms-tip-popover p {
  margin: 0;
  font-size: 15px;
  color: #D1D5DB;
  line-height: 1.5;
}

.ms-tip-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ==========================================================================
   8. BARRA INFERIOR DE BREADCRUMB (.ms-crumb-bar, 34px)
   ========================================================================== */

.ms-crumb-bar {
  position: absolute;
  left: 56px;
  right: 300px;
  bottom: 0;
  height: 34px;
  background: #FFFFFF;
  border-top: 1px solid var(--ms-line);
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 15px;
  color: var(--ms-mute);
  gap: 6px;
  z-index: 35;
}

.ms-crumb-item {
  background: transparent;
  border: 0;
  padding: 3px 6px;
  border-radius: 5px;
  color: var(--ms-mute);
  font-size: 15px;
  cursor: pointer;
  font-family: inherit;
}

.ms-crumb-item:hover {
  background: #F3F4F6;
  color: var(--ms-ink);
}

.ms-crumb-item.is-active,
.ms-crumb-bar b {
  color: var(--ms-sel);
  font-weight: 600;
}

/* ==========================================================================
   9. INSPECTOR DERECHO (.ms-inspector, 300px)
   ========================================================================== */

.ms-inspector {
  position: absolute;
  top: 52px;
  right: 0;
  width: 300px;
  bottom: 0;
  background: var(--ms-panel);
  border-left: 1px solid var(--ms-line);
  font-size: 16px;
  overflow-y: auto;
  z-index: 50;
  display: flex;
  flex-direction: column;
}

.ms-inspector-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 8px;
}

.ms-inspector-hd h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ms-ink);
}

.ms-insp-tabs {
  display: flex;
  border-bottom: 1px solid var(--ms-line);
  flex-shrink: 0;
}

.ms-insp-tab {
  flex: 1;
  text-align: center;
  padding: 10px 6px;
  color: var(--ms-mute);
  font-size: 15px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
}

.ms-insp-tab.is-on {
  color: var(--ms-acc);
  border-bottom-color: var(--ms-acc);
  font-weight: 600;
}

.ms-insp-panel {
  display: none;
  flex-direction: column;
}

.ms-insp-panel.is-on {
  display: flex;
}

.ms-align-bar {
  display: flex;
  justify-content: space-between;
  padding: 10px 18px;
  border-bottom: 1px solid var(--ms-line);
}

.ms-align-btn {
  width: 28px;
  height: 24px;
  border: 1px solid var(--ms-line);
  border-radius: 5px;
  background: #FFFFFF;
  color: var(--ms-mute);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}

.ms-align-btn:hover {
  border-color: var(--ms-acc);
  color: var(--ms-acc);
}

.ms-align-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

.ms-state-tabs {
  display: flex;
  border-top: 1px solid var(--ms-line);
  border-bottom: 1px solid var(--ms-line);
  background: #FAFBFC;
}

.ms-state-tab {
  flex: 1;
  text-align: center;
  padding: 8px 4px;
  font-size: 15px;
  color: var(--ms-mute);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
}

.ms-state-tab.is-on {
  color: var(--ms-acc);
  border-bottom-color: var(--ms-acc);
  font-weight: 600;
  background: #FFFFFF;
}

.ms-acc {
  border-bottom: 1px solid var(--ms-line);
}

.ms-acc-hd {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 18px;
  font-weight: 600;
  font-size: 15px;
  background: #FAFBFC;
  color: var(--ms-ink);
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.ms-acc-bd {
  padding: 10px 18px 14px;
  display: grid;
  gap: 10px;
  background: #FFFFFF;
}

.ms-acc.is-closed .ms-acc-bd {
  display: none;
}

.ms-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ms-lab {
  color: var(--ms-mute);
  font-size: 15px;
  width: 92px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ms-override-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ms-note);
  display: inline-block;
}

.ms-input-unit {
  flex: 1;
  height: 30px;
  border: 1px solid var(--ms-line);
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  color: #374151;
  font-size: 15px;
  justify-content: space-between;
  background: #FFFFFF;
  font-family: var(--ms-font-mono);
}

.ms-input-unit input,
.ms-input-unit select {
  border: 0;
  outline: none;
  background: transparent;
  font-size: 15px;
  color: var(--ms-ink);
  width: 100%;
  font-family: inherit;
}

.ms-input-unit em,
.ms-unit-select {
  color: var(--ms-acc);
  font-style: normal;
  font-size: 15px;
  font-weight: 600;
  border: 0;
  background: transparent;
  cursor: pointer;
  width: auto !important;
}

.ms-sw {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--ms-line);
  background: var(--ms-site-color5);
  flex-shrink: 0;
  cursor: pointer;
}

/* ==========================================================================
   10. MODALES (ENLACES CON WHATSAPP, TAMAÑO AVANZADO, APP GALERÍA, PUBLICACIÓN)
   ========================================================================== */

.ms-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 33, 0.52);
  display: none;
  place-items: center;
  z-index: 100;
  padding: 20px;
}

.ms-modal-backdrop.is-open,
.ms-modal-backdrop[data-open="true"] {
  display: grid;
}

.ms-link-dialog,
.ms-modal-card {
  width: 100%;
  max-width: 680px;
  background: #FFFFFF;
  border-radius: 14px;
  border: 1px solid var(--ms-line);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.24);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ms-modal-hd {
  padding: 16px 20px;
  border-bottom: 1px solid var(--ms-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ms-modal-hd h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.ms-link-dialog-bd {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 360px;
}

.ms-link-types {
  border-right: 1px solid var(--ms-line);
  padding: 12px;
  background: #FAFBFC;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ms-link-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 15px;
  cursor: pointer;
  color: var(--ms-ink);
}

.ms-link-radio:hover,
.ms-link-radio.is-on {
  background: var(--ms-acc2);
  color: var(--ms-acc);
  font-weight: 600;
}

.ms-link-config {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ms-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ms-field label {
  font-size: 15px;
  font-weight: 600;
  color: var(--ms-ink);
}

.ms-field input,
.ms-field select,
.ms-field textarea {
  height: 36px;
  border: 1px solid var(--ms-line);
  border-radius: 8px;
  padding: 0 12px;
  font-size: 16px;
  font-family: inherit;
  color: var(--ms-ink);
  background: #FFFFFF;
}

.ms-field textarea {
  height: 84px;
  padding: 10px 12px;
  resize: vertical;
}

.ms-modal-ft {
  padding: 14px 20px;
  border-top: 1px solid var(--ms-line);
  background: #FAFBFC;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.ms-btn-sec {
  background: #FFFFFF;
  color: var(--ms-ink);
  border: 1px solid var(--ms-line);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}

/* ==========================================================================
   11. LOS 15 COMPONENTES OBLIGATORIOS DE LA V1 EN EL DOCUMENTO (.ms-node--*)
   ========================================================================== */

.ms-node--section {
  width: 100%;
  padding: 64px 40px;
  background: var(--ms-site-color1);
  position: relative;
}

.ms-section-inner {
  width: 100%;
  max-width: var(--ms-site-max-width, 1600px);
  margin: 0 auto;
}

.ms-node--section[data-layout-preset="columns"] .ms-section-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.ms-node--section[data-layout-preset="cards"] .ms-section-inner,
.ms-node--section[data-layout-preset="collage3"] .ms-section-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.ms-node--section[data-layout-preset="collage4"] .ms-section-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.ms-node--cell {
  min-height: 120px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ms-node--stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ms-node--stack[data-direction="horizontal"] {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

.ms-node--container {
  padding: 24px;
  border-radius: 12px;
  background: var(--ms-site-color2);
  border: 1px solid var(--ms-site-color3);
  min-height: 96px;
  position: relative;
}

.ms-container-empty-plus {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px dashed var(--ms-site-color3);
  display: grid;
  place-items: center;
  margin: 16px auto;
  color: var(--ms-mute);
}

.ms-node--text {
  margin: 0;
  color: var(--ms-site-color5);
}

.ms-node--text[data-text-style="h1"] {
  font-family: var(--ms-site-font-heading);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.12;
}

.ms-node--text[data-text-style="h2"] {
  font-family: var(--ms-site-font-heading);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.18;
}

.ms-node--text[data-text-style="h3"] {
  font-family: var(--ms-site-font-heading);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.24;
}

.ms-node--text[data-text-style="p1"],
.ms-node--text[data-text-style="p2"] {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ms-site-color4);
}

.ms-node--button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--ms-site-color5);
  color: var(--ms-site-color1);
  border: 0;
  border-radius: 6px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
}

.ms-node--image {
  display: block;
  overflow: hidden;
  border-radius: 10px;
}

.ms-node--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ms-node--line {
  width: 100%;
  height: 1px;
  background: var(--ms-site-color3);
  border: 0;
  margin: 12px 0;
}

.ms-node--line[data-orientation="vertical"] {
  width: 1px;
  height: 80px;
}

.ms-node--shape {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ms-site-accent);
}

.ms-node--repeater {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
}

.ms-repeater-card {
  background: #FFFFFF;
  border: 1px solid var(--ms-line);
  border-radius: 10px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ms-node--gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
}

.ms-gallery-item {
  aspect-ratio: 4 / 3;
  background: #F3F4F6;
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid var(--ms-line);
}

.ms-node--menu {
  display: flex;
  align-items: center;
  gap: 24px;
}

.ms-node--menu a {
  color: var(--ms-site-color5);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
}

.ms-node--video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0F172A;
  color: #FFFFFF;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.ms-node--form {
  display: grid;
  gap: 14px;
  padding: 24px;
  background: #FFFFFF;
  border: 1px solid var(--ms-line);
  border-radius: 12px;
  max-width: 540px;
}

.ms-node--iframe {
  width: 100%;
  min-height: 220px;
  border: 1px dashed var(--ms-site-color3);
  border-radius: 10px;
  background: #F8FAFC;
  display: grid;
  place-items: center;
  padding: 16px;
}

/* ==========================================================================
   12. PANTALLAS 1.1 MIS SITIOS (/mis-sitios) Y 1.2 PLANTILLAS (/nuevo-sitio)
   ========================================================================== */

body.ms-portal-body {
  margin: 0;
  padding: 0;
  min-height: 100dvh;
  background: var(--ms-bg);
  color: var(--ms-ink);
  font-family: var(--ms-font-ui);
}

.ms-portal-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.ms-portal-header {
  height: 60px;
  background: var(--ms-topbar-bg);
  color: #FFFFFF;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.ms-portal-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 16px;
  color: #FFFFFF;
  text-decoration: none;
}

.ms-portal-main {
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  padding: 32px 28px 64px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ms-portal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.ms-portal-toolbar h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
}

.ms-sites-grid,
.ms-templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 22px;
}

.ms-site-card,
.ms-template-card {
  background: #FFFFFF;
  border: 1px solid var(--ms-line);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.ms-site-card:hover,
.ms-template-card:hover {
  transform: translateY(-2px);
  border-color: var(--ms-acc);
  box-shadow: 0 12px 28px rgba(14, 159, 110, 0.12);
}

.ms-card-thumb {
  height: 180px;
  background: linear-gradient(135deg, #F3F7EE, #E7ECFB);
  border-bottom: 1px solid var(--ms-line);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.ms-card-body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.ms-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
}

.ms-badge--pub {
  background: var(--ms-acc2);
  color: var(--ms-acc);
}

.ms-badge--draft {
  background: #F3F4F6;
  color: var(--ms-mute);
}

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

.ms-filter-chip {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--ms-line);
  background: #FFFFFF;
  color: var(--ms-ink);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}

.ms-filter-chip.is-on {
  background: var(--ms-acc);
  border-color: var(--ms-acc);
  color: #FFFFFF;
  font-weight: 600;
}

/* ── Reglas auxiliares runtime cliente V2 ── */
.ms-tile.is-hidden,
.ms-tip-popover.is-dismissed {
  display: none !important;
}

.ms-override-dot {
  opacity: 0.35;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.ms-override-dot.is-visible {
  opacity: 1;
  transform: scale(1.25);
}

.ms-node-form-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.ms-node-form-input {
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--ms-line);
  border-radius: 6px;
  background: #FFFFFF;
  font-size: 16px;
  color: var(--ms-ink);
}

/* ── FIN mercadostudio-v2.css ── */

/* === MERCADOSTUDIO V2 E1-E10 === */
/**
 * MercadoStudio v2 — Hoja de Estilos Oficial del Editor Visual, Componentes v1 y Pantallas de Gestión
 * Cumple 100 % con `style-src 'self'` (cero estilos inline), `docs/design-system.md` (`p09-sol-petroleo`)
 * y `docs/mercadostudio-editor-kit/docs/02_especificacion_ux_ui_mercadostudio.md` (wireframes `ms_01` a `ms_04`).
 */

:root {
  --ms-bg: #EEF0F4;
  --ms-stage-bg: #EEF0F4;
  --ms-panel: #FFFFFF;
  --ms-panel-bg: #FFFFFF;
  --ms-panel-subtle: #FAFBFC;
  --ms-line: #E2E5EB;
  --ms-border: #E2E5EB;
  --ms-ink: #1B1F2A;
  --ms-mute: #6B7280;
  --ms-muted: #6B7280;
  --ms-acc: #0E9F6E;
  --ms-accent: #0E9F6E;
  --ms-acc2: #E8F7F1;
  --ms-accent-soft: #E8F7F1;
  --ms-sel: #2563EB;
  --ms-select-blue: #2563EB;
  --ms-glob: #10B981;
  --ms-global-green: #10B981;
  --ms-note: #F59E0B;
  --ms-sol: #F59E0B;
  --ms-topbar-bg: #141821;
  --ms-topbar-pill: #232936;
  --ms-guide-magenta: #FF2D78;
  --ms-danger: #DC2626;
  --ms-cms-purple: #7C3AED;
  --ms-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --ms-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Tokens por defecto del documento en el lienzo (sobreescritos por el compilador CSS del sitio) */
  --ms-site-color1: #FFFFFF;
  --ms-site-color2: #F7F8FA;
  --ms-site-color3: #CBD5E1;
  --ms-site-color4: #475569;
  --ms-site-color5: #1B1F2A;
  --ms-site-accent: #0E9F6E;
  --ms-site-font-heading: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --ms-site-font-body: 'Inter', system-ui, sans-serif;
  --ms-site-max-width: 1600px;
}

/* ==========================================================================
   1. SHELL GENERAL DEL EDITOR (100dvh, ms_01_estructura_general_editor.png)
   ========================================================================== */

body.ms-editor-body,
.ms-editor-shell {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100dvh;
  background: var(--ms-bg);
  color: var(--ms-ink);
  font-family: var(--ms-font-ui);
  font-size: 16px;
  line-height: 1.4;
  overflow: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

.ms-editor-shell *,
.ms-editor-shell *::before,
.ms-editor-shell *::after,
.ms-portal-shell *,
.ms-portal-shell *::before,
.ms-portal-shell *::after {
  box-sizing: border-box;
}

.ms-hidden,
[hidden] {
  display: none !important;
}

.ms-desktop-notice {
  display: none;
  position: fixed;
  bottom: 42px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  background: var(--ms-topbar-bg);
  color: #FFFFFF;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 15px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

@media (max-width: 1023px) {
  .ms-desktop-notice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
}

/* ==========================================================================
   2. BARRA SUPERIOR FIJA (.ms-top, 52px, #141821)
   ========================================================================== */

.ms-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 52px;
  background: var(--ms-topbar-bg);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 12px;
  font-size: 16px;
  z-index: 60;
  user-select: none;
}

.ms-logo {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0E9F6E, #34D399);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 15px;
  color: #FFFFFF;
  text-decoration: none;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(14, 159, 110, 0.35);
}

.ms-top-menus {
  display: flex;
  align-items: center;
  gap: 2px;
}

.ms-top-menu-wrap {
  position: relative;
}

.ms-top-menu-btn {
  background: transparent;
  color: #E5E7EB;
  border: 0;
  padding: 6px 9px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
}

.ms-top-menu-btn:hover,
.ms-top-menu-btn[aria-expanded="true"] {
  background: var(--ms-topbar-pill);
  color: #FFFFFF;
}

.ms-top-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 230px;
  background: #1B202C;
  color: #F3F4F6;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.36);
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 90;
}

.ms-top-menu-wrap:hover .ms-top-dropdown,
.ms-top-menu-wrap:focus-within .ms-top-dropdown,
.ms-top-dropdown.is-open {
  display: flex;
}

.ms-top-dropdown-item {
  background: transparent;
  color: #E5E7EB;
  border: 0;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 15px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
}

.ms-top-dropdown-item:hover {
  background: #283042;
  color: #FFFFFF;
}

.ms-top-dropdown-item kbd {
  font-family: var(--ms-font-mono);
  font-size: 15px;
  color: #9CA3AF;
}

.ms-top-dropdown-sep {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 0;
}

.ms-pill {
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--ms-topbar-pill);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 15px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  white-space: nowrap;
}

.ms-pill:hover {
  background: #2C3344;
}

.ms-save-status {
  color: #9CA3AF;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.ms-save-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ms-glob);
  display: inline-block;
}

.ms-save-status[data-state="saving"] .ms-save-dot {
  background: var(--ms-note);
}

.ms-save-status[data-state="error"] .ms-save-dot {
  background: var(--ms-danger);
}

.ms-top-center {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ms-bp {
  display: flex;
  gap: 6px;
  align-items: center;
}

.ms-bp-btn {
  width: 30px;
  height: 28px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: var(--ms-topbar-pill);
  color: #D1D5DB;
  border: 0;
  cursor: pointer;
  font-size: 16px;
  padding: 0;
  transition: background 120ms ease, color 120ms ease;
}

.ms-bp-btn:hover {
  background: #2D3548;
  color: #FFFFFF;
}

.ms-bp-btn.is-on,
.ms-bp-btn[aria-pressed="true"] {
  background: var(--ms-acc);
  color: #FFFFFF;
}

.ms-bp-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

.ms-pub {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}

.ms-icon-top-btn {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: transparent;
  color: #D1D5DB;
  border: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.ms-icon-top-btn:hover {
  background: var(--ms-topbar-pill);
  color: #FFFFFF;
}

.ms-icon-top-btn svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

.ms-btn-pub {
  background: var(--ms-acc);
  color: #FFFFFF;
  padding: 7px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  transition: filter 120ms ease;
}

.ms-btn-pub:hover {
  filter: brightness(1.08);
}

/* ==========================================================================
   3. POPOVER DE BREAKPOINTS (.ms-bp-popover, ms_04_breakpoints_responsive.png)
   ========================================================================== */

.ms-bp-popover {
  position: absolute;
  top: 58px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 75;
  background: #141821;
  color: #FFFFFF;
  border-radius: 12px;
  padding: 14px;
  width: 320px;
  font-size: 15px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: none;
  flex-direction: column;
  gap: 6px;
}

.ms-bp-popover.is-open,
.ms-bp-popover[data-open="true"] {
  display: flex;
}

.ms-bp-popover-title {
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
}

.ms-bp-popover-sub {
  color: #9CA3AF;
  font-size: 15px;
  padding-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ms-bp-popover-item {
  padding: 8px 10px;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  color: #E5E7EB;
  border: 0;
  width: 100%;
  font-size: 15px;
  cursor: pointer;
  font-family: inherit;
}

.ms-bp-popover-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.ms-bp-popover-item.is-on {
  background: #232936;
  color: #FFFFFF;
  font-weight: 600;
}

.ms-bp-popover-add {
  color: #34D399;
  background: transparent;
  border: 0;
  padding: 8px 10px 4px;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

/* ==========================================================================
   4. RAIL IZQUIERDO DE 14 ÍCONOS (.ms-rail, 56px)
   ========================================================================== */

.ms-rail {
  position: absolute;
  top: 52px;
  left: 0;
  width: 56px;
  bottom: 0;
  background: var(--ms-panel);
  border-right: 1px solid var(--ms-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  gap: 4px;
  z-index: 50;
}

.ms-rail-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--ms-mute);
  background: transparent;
  border: 0;
  cursor: pointer;
  position: relative;
  padding: 0;
  transition: background 120ms ease, color 120ms ease;
}

.ms-rail-btn:hover {
  background: #F3F4F6;
  color: var(--ms-ink);
}

.ms-rail-btn.is-on,
.ms-rail-btn[aria-expanded="true"] {
  background: var(--ms-acc2);
  color: var(--ms-acc);
}

.ms-rail-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ms-rail-sep {
  width: 26px;
  height: 1px;
  background: var(--ms-line);
  margin: 2px 0;
  flex-shrink: 0;
}

.ms-rail-spacer {
  margin-top: auto;
}

.ms-rail-btn[data-ms-tooltip]:hover::after {
  content: attr(data-ms-tooltip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: #141821;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 500;
  padding: 5px 9px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 80;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}

/* ==========================================================================
   5. FLYOUTS DEL RAIL IZQUIERDO (.ms-flyout, ms_02_panel_agregar_flyout.png)
   ========================================================================== */

.ms-flyout {
  position: absolute;
  top: 52px;
  left: 56px;
  width: 360px;
  bottom: 0;
  background: var(--ms-panel);
  border-right: 1px solid var(--ms-line);
  box-shadow: 8px 0 24px rgba(0, 0, 0, 0.08);
  display: none;
  flex-direction: column;
  z-index: 40;
  overflow: hidden;
}

.ms-flyout.is-open,
.ms-flyout[data-open="true"] {
  display: flex;
}

.ms-flyout--agregar,
.ms-flyout[data-ms-flyout="agregar"] {
  width: 560px;
}

.ms-flyout--paginas.has-subpanel,
.ms-flyout[data-ms-flyout="paginas"] {
  width: 680px;
}

.ms-flyout--mapa,
.ms-flyout[data-ms-flyout="mapa"] {
  width: 760px;
}

.ms-flyout--tema,
.ms-flyout[data-ms-flyout="tema"] {
  width: 400px;
}

.ms-flyout--medios,
.ms-flyout[data-ms-flyout="medios"] {
  width: 460px;
}

.ms-flyout-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ms-line);
  flex-shrink: 0;
  background: #FFFFFF;
}

.ms-flyout-hd b,
.ms-flyout-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ms-ink);
}

.ms-search {
  margin-left: auto;
  width: 220px;
  height: 34px;
  border: 1px solid var(--ms-line);
  border-radius: 8px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ms-mute);
  font-size: 15px;
  background: #FFFFFF;
}

.ms-search input {
  border: 0;
  outline: none;
  background: transparent;
  width: 100%;
  font-size: 15px;
  color: var(--ms-ink);
  font-family: inherit;
}

.ms-flyout-icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: var(--ms-mute);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 16px;
}

.ms-flyout-icon-btn:hover {
  background: #F3F4F6;
  color: var(--ms-ink);
}

.ms-flyout-bd {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.ms-flyout-scroll {
  flex: 1;
  padding: 16px 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Panel Agregar: columna de 17 categorías + grilla de 3 columnas */
.ms-cats {
  width: 190px;
  border-right: 1px solid var(--ms-line);
  padding: 8px 0;
  font-size: 16px;
  overflow-y: auto;
  flex-shrink: 0;
  background: #FFFFFF;
}

.ms-cat-item {
  display: block;
  width: 100%;
  padding: 8px 18px;
  color: #374151;
  background: transparent;
  border: 0;
  text-align: left;
  font-size: 16px;
  cursor: pointer;
  font-family: inherit;
}

.ms-cat-item:hover {
  background: #F9FAFB;
}

.ms-cat-item.is-on,
.ms-cats .on {
  background: var(--ms-acc2);
  color: var(--ms-acc);
  font-weight: 600;
}

.ms-cats hr {
  border: 0;
  border-top: 1px solid var(--ms-line);
  margin: 6px 0;
}

.ms-tiles {
  flex: 1;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-content: start;
  overflow-y: auto;
}

.ms-sub {
  grid-column: 1 / -1;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ms-mute);
  margin-top: 6px;
}

.ms-sub:first-child {
  margin-top: 0;
}

.ms-tile {
  height: 96px;
  border: 1px solid var(--ms-line);
  border-radius: 10px;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  color: #374151;
  cursor: grab;
  padding: 8px;
  text-align: center;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  font-family: inherit;
}

.ms-tile svg {
  width: 26px;
  height: 26px;
  stroke: #1B1F2A;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ms-tile:hover,
.ms-tile.is-hov,
.ms-tile.hov {
  border-color: var(--ms-acc);
  box-shadow: 0 0 0 3px var(--ms-acc2);
}

.ms-tile--section {
  grid-column: 1 / -1;
  height: auto;
  min-height: 76px;
  flex-direction: row;
  justify-content: space-between;
  text-align: left;
  padding: 12px 14px;
}

.ms-tile-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ms-tile-meta strong {
  font-size: 15px;
  color: var(--ms-ink);
}

.ms-tile-meta span {
  font-size: 15px;
  color: var(--ms-mute);
}

/* Subpanel de Ajustes de Página y SEO con Vista Previa de Google */
.ms-pages-main {
  width: 300px;
  border-right: 1px solid var(--ms-line);
  padding: 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ms-pages-subpanel {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  background: #FAFBFC;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ms-page-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--ms-line);
  background: #FFFFFF;
  font-size: 15px;
  cursor: pointer;
}

.ms-page-item.is-active {
  border-color: var(--ms-acc);
  background: var(--ms-acc2);
  color: var(--ms-acc);
  font-weight: 600;
}

.ms-google-serp {
  background: #FFFFFF;
  border: 1px solid var(--ms-line);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ms-google-serp-url {
  font-size: 15px;
  color: #0F766E;
}

.ms-google-serp-title {
  font-size: 15px;
  font-weight: 600;
  color: #1D4ED8;
}

.ms-google-serp-desc {
  font-size: 15px;
  color: #4B5563;
  line-height: 1.45;
}

/* Árbol de Capas (.ms-layer-tree) */
.ms-layer-tree {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ms-layer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 15px;
  color: var(--ms-ink);
  cursor: pointer;
  border: 1px solid transparent;
}

.ms-layer-row:hover {
  background: #F3F4F6;
}

.ms-layer-row.is-selected {
  background: #EFF6FF;
  border-color: #BFDBFE;
  color: var(--ms-sel);
  font-weight: 600;
}

.ms-layer-row[data-depth="1"] {
  padding-left: 22px;
}

.ms-layer-row[data-depth="2"] {
  padding-left: 36px;
}

.ms-layer-row[data-depth="3"] {
  padding-left: 50px;
}

.ms-layer-actions {
  margin-left: auto;
  display: inline-flex;
  gap: 4px;
  color: var(--ms-mute);
}

/* Mapa del sitio visual en columnas (.ms-sitemap-grid) */
.ms-sitemap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}

.ms-sitemap-col {
  background: #FAFBFC;
  border: 1px solid var(--ms-line);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ms-sitemap-sec-pill {
  background: #FFFFFF;
  border: 1px solid var(--ms-line);
  border-radius: 7px;
  padding: 8px 10px;
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Tema del sitio (.ms-theme-swatches) */
.ms-theme-swatches {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.ms-theme-token-card {
  border: 1px solid var(--ms-line);
  border-radius: 8px;
  padding: 8px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ms-swatch-preview {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--ms-line);
  flex-shrink: 0;
}

.ms-swatch-preview[data-token="color1"] { background: var(--ms-site-color1); }
.ms-swatch-preview[data-token="color2"] { background: var(--ms-site-color2); }
.ms-swatch-preview[data-token="color3"] { background: var(--ms-site-color3); }
.ms-swatch-preview[data-token="color4"] { background: var(--ms-site-color4); }
.ms-swatch-preview[data-token="color5"] { background: var(--ms-site-color5); }
.ms-swatch-preview[data-token="accent"] { background: var(--ms-site-accent); }

/* ==========================================================================
   6. LIENZO CENTRAL (.ms-canvas-wrap) Y MARCO DEL SITIO (.ms-page-frame)
   ========================================================================== */

.ms-canvas-wrap {
  position: absolute;
  top: 52px;
  left: 56px;
  right: 300px;
  bottom: 34px;
  background: var(--ms-bg);
  padding: 22px 28px 64px;
  overflow: auto;
}

.ms-canvas-stage {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  transition: max-width 180ms ease;
}

.ms-editor-shell[data-ms-bp="tablet"] .ms-canvas-stage {
  max-width: 860px;
}

.ms-editor-shell[data-ms-bp="mobile"] .ms-canvas-stage {
  max-width: 390px;
}

.ms-bp-vertical-label {
  position: absolute;
  left: -24px;
  top: 44px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 15px;
  font-weight: 600;
  color: var(--ms-mute);
  background: #FFFFFF;
  border: 1px solid var(--ms-line);
  border-radius: 6px;
  padding: 8px 4px;
  letter-spacing: 0.03em;
  user-select: none;
}

.ms-page-frame {
  background: #FFFFFF;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  min-height: calc(100dvh - 134px);
  position: relative;
  border: 1px solid var(--ms-line);
}

.ms-url-bar {
  height: 34px;
  border-bottom: 1px solid var(--ms-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--ms-mute);
  gap: 8px;
  background: #FFFFFF;
  border-radius: 6px 6px 0 0;
}

.ms-url-bar b,
.ms-url-bar a {
  color: var(--ms-acc);
  font-weight: 600;
  text-decoration: none;
}

.ms-site-root {
  position: relative;
  width: 100%;
  background: var(--ms-site-color1);
  color: var(--ms-site-color5);
  font-family: var(--ms-site-font-body);
}

/* ==========================================================================
   7. OVERLAYS DE SELECCIÓN, TOOLBAR FLOTANTE, CHIP Y DRAG & DROP
   ========================================================================== */

.ms-node {
  position: relative;
  transition: outline-color 100ms ease;
}

.ms-editor-shell .ms-node:hover {
  outline: 1px dashed rgba(37, 99, 235, 0.55);
  outline-offset: -1px;
}

.ms-sel-outline,
.ms-editor-shell .ms-node.is-selected {
  outline: 2px solid var(--ms-sel) !important;
  outline-offset: -2px;
}

.ms-sel-global,
.ms-editor-shell .ms-node--global.is-selected,
.ms-editor-shell [data-ms-global="true"].is-selected {
  outline: 2px solid var(--ms-glob) !important;
  outline-offset: -2px;
}

.ms-chip {
  position: absolute;
  top: 50%;
  left: 38%;
  background: var(--ms-sel);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  z-index: 26;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.28);
}

.ms-chip--global {
  background: var(--ms-glob);
}

.ms-chip-up {
  background: rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  border: 0;
  border-radius: 3px;
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  font-size: 15px;
  line-height: 1;
}

.ms-handle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid var(--ms-sel);
  z-index: 27;
}

.ms-handle--nw { top: -4px; left: -4px; cursor: nwse-resize; }
.ms-handle--n  { top: -4px; left: calc(50% - 4px); cursor: ns-resize; }
.ms-handle--ne { top: -4px; right: -4px; cursor: nesw-resize; }
.ms-handle--e  { top: calc(50% - 4px); right: -4px; cursor: ew-resize; }
.ms-handle--se { bottom: -4px; right: -4px; cursor: nwse-resize; }
.ms-handle--s  { bottom: -4px; left: calc(50% - 4px); cursor: ns-resize; }
.ms-handle--sw { bottom: -4px; left: -4px; cursor: nesw-resize; }
.ms-handle--w  { top: calc(50% - 4px); left: -4px; cursor: ew-resize; }

.ms-handle--padding {
  border-radius: 2px;
  border-color: var(--ms-acc);
  top: 8px;
  left: calc(50% - 4px);
}

.ms-floating-tb {
  position: absolute;
  top: 320px;
  left: 38%;
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
  border: 1px solid var(--ms-line);
  display: flex;
  align-items: center;
  font-size: 16px;
  height: 42px;
  z-index: 28;
}

.ms-floating-tb-btn {
  padding: 0 14px;
  height: 100%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-right: 1px solid var(--ms-line);
  background: transparent;
  color: var(--ms-ink);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}

.ms-floating-tb-btn:last-child {
  border-right: 0;
}

.ms-floating-tb-btn:hover {
  background: #F9FAFB;
  color: var(--ms-acc);
}

.ms-more-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 240px;
  background: #FFFFFF;
  border: 1px solid var(--ms-line);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 35;
}

.ms-more-menu.is-open {
  display: flex;
}

.ms-more-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: var(--ms-ink);
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.ms-more-item:hover {
  background: #F3F4F6;
}

.ms-more-item--danger {
  color: var(--ms-danger);
}

.ms-add-section-btn {
  position: absolute;
  left: 50%;
  bottom: -15px;
  transform: translateX(-50%);
  background: var(--ms-sel);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  border: 2px solid #FFFFFF;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28);
  cursor: pointer;
  z-index: 25;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}

.ms-dnd-ghost {
  position: absolute;
  left: 52%;
  top: 340px;
  width: 150px;
  height: 96px;
  border: 2px dashed var(--ms-acc);
  border-radius: 10px;
  background: rgba(14, 159, 110, 0.08);
  display: none;
  place-items: center;
  font-size: 15px;
  color: var(--ms-acc);
  font-weight: 600;
  z-index: 30;
  pointer-events: none;
}

.ms-dnd-ghost.is-visible {
  display: grid;
}

.ms-dnd-dropline {
  position: absolute;
  left: 35%;
  top: 446px;
  width: 300px;
  height: 4px;
  background: var(--ms-acc);
  border-radius: 2px;
  display: none;
  z-index: 30;
  pointer-events: none;
}

.ms-dnd-dropline.is-visible {
  display: block;
}

.ms-smart-guides {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 29;
}

.ms-smart-guides line {
  stroke: var(--ms-guide-magenta);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

.ms-tip-popover {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 320px;
  background: #141821;
  color: #FFFFFF;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ms-tip-popover h4 {
  margin: 0;
  font-size: 16px;
  color: #34D399;
}

.ms-tip-popover p {
  margin: 0;
  font-size: 15px;
  color: #D1D5DB;
  line-height: 1.5;
}

.ms-tip-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ==========================================================================
   8. BARRA INFERIOR DE BREADCRUMB (.ms-crumb-bar, 34px)
   ========================================================================== */

.ms-crumb-bar {
  position: absolute;
  left: 56px;
  right: 300px;
  bottom: 0;
  height: 34px;
  background: #FFFFFF;
  border-top: 1px solid var(--ms-line);
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 15px;
  color: var(--ms-mute);
  gap: 6px;
  z-index: 35;
}

.ms-crumb-item {
  background: transparent;
  border: 0;
  padding: 3px 6px;
  border-radius: 5px;
  color: var(--ms-mute);
  font-size: 15px;
  cursor: pointer;
  font-family: inherit;
}

.ms-crumb-item:hover {
  background: #F3F4F6;
  color: var(--ms-ink);
}

.ms-crumb-item.is-active,
.ms-crumb-bar b {
  color: var(--ms-sel);
  font-weight: 600;
}

/* ==========================================================================
   9. INSPECTOR DERECHO (.ms-inspector, 300px)
   ========================================================================== */

.ms-inspector {
  position: absolute;
  top: 52px;
  right: 0;
  width: 300px;
  bottom: 0;
  background: var(--ms-panel);
  border-left: 1px solid var(--ms-line);
  font-size: 16px;
  overflow-y: auto;
  z-index: 50;
  display: flex;
  flex-direction: column;
}

.ms-inspector-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 8px;
}

.ms-inspector-hd h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ms-ink);
}

.ms-insp-tabs {
  display: flex;
  border-bottom: 1px solid var(--ms-line);
  flex-shrink: 0;
}

.ms-insp-tab {
  flex: 1;
  text-align: center;
  padding: 10px 6px;
  color: var(--ms-mute);
  font-size: 15px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
}

.ms-insp-tab.is-on {
  color: var(--ms-acc);
  border-bottom-color: var(--ms-acc);
  font-weight: 600;
}

.ms-insp-panel {
  display: none;
  flex-direction: column;
}

.ms-insp-panel.is-on {
  display: flex;
}

.ms-align-bar {
  display: flex;
  justify-content: space-between;
  padding: 10px 18px;
  border-bottom: 1px solid var(--ms-line);
}

.ms-align-btn {
  width: 28px;
  height: 24px;
  border: 1px solid var(--ms-line);
  border-radius: 5px;
  background: #FFFFFF;
  color: var(--ms-mute);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}

.ms-align-btn:hover {
  border-color: var(--ms-acc);
  color: var(--ms-acc);
}

.ms-align-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

.ms-state-tabs {
  display: flex;
  border-top: 1px solid var(--ms-line);
  border-bottom: 1px solid var(--ms-line);
  background: #FAFBFC;
}

.ms-state-tab {
  flex: 1;
  text-align: center;
  padding: 8px 4px;
  font-size: 15px;
  color: var(--ms-mute);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
}

.ms-state-tab.is-on {
  color: var(--ms-acc);
  border-bottom-color: var(--ms-acc);
  font-weight: 600;
  background: #FFFFFF;
}

.ms-acc {
  border-bottom: 1px solid var(--ms-line);
}

.ms-acc-hd {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 18px;
  font-weight: 600;
  font-size: 15px;
  background: #FAFBFC;
  color: var(--ms-ink);
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.ms-acc-bd {
  padding: 10px 18px 14px;
  display: grid;
  gap: 10px;
  background: #FFFFFF;
}

.ms-acc.is-closed .ms-acc-bd {
  display: none;
}

.ms-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ms-lab {
  color: var(--ms-mute);
  font-size: 15px;
  width: 92px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ms-override-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ms-note);
  display: inline-block;
}

.ms-input-unit {
  flex: 1;
  height: 30px;
  border: 1px solid var(--ms-line);
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  color: #374151;
  font-size: 15px;
  justify-content: space-between;
  background: #FFFFFF;
  font-family: var(--ms-font-mono);
}

.ms-input-unit input,
.ms-input-unit select {
  border: 0;
  outline: none;
  background: transparent;
  font-size: 15px;
  color: var(--ms-ink);
  width: 100%;
  font-family: inherit;
}

.ms-input-unit em,
.ms-unit-select {
  color: var(--ms-acc);
  font-style: normal;
  font-size: 15px;
  font-weight: 600;
  border: 0;
  background: transparent;
  cursor: pointer;
  width: auto !important;
}

.ms-sw {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--ms-line);
  background: var(--ms-site-color5);
  flex-shrink: 0;
  cursor: pointer;
}

/* ==========================================================================
   10. MODALES (ENLACES CON WHATSAPP, TAMAÑO AVANZADO, APP GALERÍA, PUBLICACIÓN)
   ========================================================================== */

.ms-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 33, 0.52);
  display: none;
  place-items: center;
  z-index: 100;
  padding: 20px;
}

.ms-modal-backdrop.is-open,
.ms-modal-backdrop[data-open="true"] {
  display: grid;
}

.ms-link-dialog,
.ms-modal-card {
  width: 100%;
  max-width: 680px;
  background: #FFFFFF;
  border-radius: 14px;
  border: 1px solid var(--ms-line);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.24);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ms-modal-hd {
  padding: 16px 20px;
  border-bottom: 1px solid var(--ms-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ms-modal-hd h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.ms-link-dialog-bd {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 360px;
}

.ms-link-types {
  border-right: 1px solid var(--ms-line);
  padding: 12px;
  background: #FAFBFC;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ms-link-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 15px;
  cursor: pointer;
  color: var(--ms-ink);
}

.ms-link-radio:hover,
.ms-link-radio.is-on {
  background: var(--ms-acc2);
  color: var(--ms-acc);
  font-weight: 600;
}

.ms-link-config {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ms-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ms-field label {
  font-size: 15px;
  font-weight: 600;
  color: var(--ms-ink);
}

.ms-field input,
.ms-field select,
.ms-field textarea {
  height: 36px;
  border: 1px solid var(--ms-line);
  border-radius: 8px;
  padding: 0 12px;
  font-size: 16px;
  font-family: inherit;
  color: var(--ms-ink);
  background: #FFFFFF;
}

.ms-field textarea {
  height: 84px;
  padding: 10px 12px;
  resize: vertical;
}

.ms-modal-ft {
  padding: 14px 20px;
  border-top: 1px solid var(--ms-line);
  background: #FAFBFC;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.ms-btn-sec {
  background: #FFFFFF;
  color: var(--ms-ink);
  border: 1px solid var(--ms-line);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}

/* ==========================================================================
   11. LOS 15 COMPONENTES OBLIGATORIOS DE LA V1 EN EL DOCUMENTO (.ms-node--*)
   ========================================================================== */

.ms-node--section {
  width: 100%;
  padding: 64px 40px;
  background: var(--ms-site-color1);
  position: relative;
}

.ms-section-inner {
  width: 100%;
  max-width: var(--ms-site-max-width, 1600px);
  margin: 0 auto;
}

.ms-node--section[data-layout-preset="columns"] .ms-section-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.ms-node--section[data-layout-preset="cards"] .ms-section-inner,
.ms-node--section[data-layout-preset="collage3"] .ms-section-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.ms-node--section[data-layout-preset="collage4"] .ms-section-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.ms-node--cell {
  min-height: 120px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ms-node--stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ms-node--stack[data-direction="horizontal"] {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

.ms-node--container {
  padding: 24px;
  border-radius: 12px;
  background: var(--ms-site-color2);
  border: 1px solid var(--ms-site-color3);
  min-height: 96px;
  position: relative;
}

.ms-container-empty-plus {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px dashed var(--ms-site-color3);
  display: grid;
  place-items: center;
  margin: 16px auto;
  color: var(--ms-mute);
}

.ms-node--text {
  margin: 0;
  color: var(--ms-site-color5);
}

.ms-node--text[data-text-style="h1"] {
  font-family: var(--ms-site-font-heading);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.12;
}

.ms-node--text[data-text-style="h2"] {
  font-family: var(--ms-site-font-heading);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.18;
}

.ms-node--text[data-text-style="h3"] {
  font-family: var(--ms-site-font-heading);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.24;
}

.ms-node--text[data-text-style="p1"],
.ms-node--text[data-text-style="p2"] {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ms-site-color4);
}

.ms-node--button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--ms-site-color5);
  color: var(--ms-site-color1);
  border: 0;
  border-radius: 6px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
}

.ms-node--image {
  display: block;
  overflow: hidden;
  border-radius: 10px;
}

.ms-node--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ms-node--line {
  width: 100%;
  height: 1px;
  background: var(--ms-site-color3);
  border: 0;
  margin: 12px 0;
}

.ms-node--line[data-orientation="vertical"] {
  width: 1px;
  height: 80px;
}

.ms-node--shape {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ms-site-accent);
}

.ms-node--repeater {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
}

.ms-repeater-card {
  background: #FFFFFF;
  border: 1px solid var(--ms-line);
  border-radius: 10px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ms-node--gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
}

.ms-gallery-item {
  aspect-ratio: 4 / 3;
  background: #F3F4F6;
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid var(--ms-line);
}

.ms-node--menu {
  display: flex;
  align-items: center;
  gap: 24px;
}

.ms-node--menu a {
  color: var(--ms-site-color5);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
}

.ms-node--video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0F172A;
  color: #FFFFFF;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.ms-node--form {
  display: grid;
  gap: 14px;
  padding: 24px;
  background: #FFFFFF;
  border: 1px solid var(--ms-line);
  border-radius: 12px;
  max-width: 540px;
}

.ms-node--iframe {
  width: 100%;
  min-height: 220px;
  border: 1px dashed var(--ms-site-color3);
  border-radius: 10px;
  background: #F8FAFC;
  display: grid;
  place-items: center;
  padding: 16px;
}

/* ==========================================================================
   12. PANTALLAS 1.1 MIS SITIOS (/mis-sitios) Y 1.2 PLANTILLAS (/nuevo-sitio)
   ========================================================================== */

body.ms-portal-body {
  margin: 0;
  padding: 0;
  min-height: 100dvh;
  background: var(--ms-bg);
  color: var(--ms-ink);
  font-family: var(--ms-font-ui);
}

.ms-portal-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.ms-portal-header {
  height: 60px;
  background: var(--ms-topbar-bg);
  color: #FFFFFF;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.ms-portal-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 16px;
  color: #FFFFFF;
  text-decoration: none;
}

.ms-portal-main {
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  padding: 32px 28px 64px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ms-portal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.ms-portal-toolbar h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
}

.ms-sites-grid,
.ms-templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 22px;
}

.ms-site-card,
.ms-template-card {
  background: #FFFFFF;
  border: 1px solid var(--ms-line);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.ms-site-card:hover,
.ms-template-card:hover {
  transform: translateY(-2px);
  border-color: var(--ms-acc);
  box-shadow: 0 12px 28px rgba(14, 159, 110, 0.12);
}

.ms-card-thumb {
  height: 180px;
  background: linear-gradient(135deg, #F3F7EE, #E7ECFB);
  border-bottom: 1px solid var(--ms-line);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.ms-card-body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.ms-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
}

.ms-badge--pub {
  background: var(--ms-acc2);
  color: var(--ms-acc);
}

.ms-badge--draft {
  background: #F3F4F6;
  color: var(--ms-mute);
}

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

.ms-filter-chip {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--ms-line);
  background: #FFFFFF;
  color: var(--ms-ink);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}

.ms-filter-chip.is-on {
  background: var(--ms-acc);
  border-color: var(--ms-acc);
  color: #FFFFFF;
  font-weight: 600;
}

/* ── Reglas auxiliares runtime cliente V2 ── */
.ms-tile.is-hidden,
.ms-tip-popover.is-dismissed {
  display: none !important;
}

.ms-flyout-search svg,
.ms-flyout-icon-btn svg,
.ms-floating-tb-btn svg,
.ms-chip svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.ms-tip-popover svg {
  width: 28px;
  height: 20px;
  flex-shrink: 0;
  margin-bottom: 6px;
}

.ms-node-button svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.ms-override-dot {
  opacity: 0.35;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.ms-override-dot.is-visible {
  opacity: 1;
  transform: scale(1.25);
}

.ms-node-form-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.ms-node-form-input {
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--ms-line);
  border-radius: 6px;
  background: #FFFFFF;
  font-size: 16px;
  color: var(--ms-ink);
}

/* ==========================================================================
   MercadoVentas (mercadoventas.com.ar) sobre MercadoStudio (mercadostudio.com.ar)
   Hoja de Estilos Integral F1 a F7 · Cero Estilos Inline (CSP style-src 'self')
   Soporta Tema Actual ([data-mv-tema="actual"]) y Tema Nuevo Seleccionable
   ([data-mv-tema="confianza-energia"]: Azul Noche #0C256F -> #1E3A8A,
   Primario #2563EB, Energía #EA580C, Esmeralda #059669, Superficies #F1F5F9 / #FFFFFF)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS DE TEMA: ACTUAL (DEFAULT) Y CONFIANZA + ENERGÍA (SELECCIONABLE)
   -------------------------------------------------------------------------- */
:root,
.mv-sitio,
[data-mv-tema="actual"],
.mv-sitio[data-mv-tema="actual"] {
  --mv-brand-header-bg: linear-gradient(135deg, #0C256F 0%, #1647D8 100%);
  --mv-brand-header-solid: #0C256F;
  --mv-brand-header-end: #1647D8;
  --mv-brand-header-fg: #FFFFFF;
  --mv-brand-header-muted: #DBEAFE;

  --mv-brand-primary: #1647D8;
  --mv-brand-primary-hover: #133BBD;
  --mv-brand-primary-soft: #EAEEF9;
  --mv-brand-primary-border: #B8C7E2;

  --mv-brand-energy: #D97706;
  --mv-brand-energy-hover: #B45309;
  --mv-brand-energy-soft: #FDF3DF;
  --mv-brand-energy-border: #FDE68A;

  --mv-success: #0F7B43;
  --mv-success-soft: #E5F5EC;
  --mv-success-border: #A7F3D0;

  --mv-warning: #D97706;
  --mv-warning-soft: #FFFBEB;
  --mv-danger: #C0262D;
  --mv-danger-soft: #FCEBEC;

  --mv-bg-page: #F3F6FD;
  --mv-bg-surface: #FFFFFF;
  --mv-bg-subtle: #F8FAFC;
  --mv-bg-elevated: #FFFFFF;
  --mv-bg-dark: #0F172A;

  --mv-border: #D2DBED;
  --mv-border-subtle: #E2E8F0;
  --mv-border-strong: #B8C7E2;

  --mv-text-primary: #0D1528;
  --mv-text-secondary: #3C4865;
  --mv-text-muted: #5F6B88;
  --mv-text-inverse: #FFFFFF;

  --mv-reputation-1: #DC2626;
  --mv-reputation-2: #EA580C;
  --mv-reputation-3: #F59E0B;
  --mv-reputation-4: #84CC16;
  --mv-reputation-5: #059669;

  --mv-font-display: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mv-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mv-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

  --mv-space-1: 4px;
  --mv-space-2: 8px;
  --mv-space-3: 12px;
  --mv-space-4: 16px;
  --mv-space-5: 20px;
  --mv-space-6: 24px;
  --mv-space-8: 32px;
  --mv-space-10: 40px;
  --mv-space-12: 48px;

  --mv-radius-xs: 4px;
  --mv-radius-sm: 6px;
  --mv-radius-md: 8px;
  --mv-radius-lg: 12px;
  --mv-radius-xl: 16px;
  --mv-radius-pill: 999px;

  --mv-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --mv-shadow-card: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --mv-shadow-hover: 0 10px 24px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.06);
  --mv-shadow-overlay: 0 20px 48px rgba(15, 23, 42, 0.24);
  --mv-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.35);

  --mv-container-max: 1200px;
  --mv-header-height-desktop: 100px;
  --mv-header-height-mobile: 60px;
  --mv-sidebar-filters-width: 270px;
  --mv-account-rail-width: 56px;
  --mv-account-sidebar-width: 240px;
  --mv-buybox-width: 310px;

  --mv-z-header: 100;
  --mv-z-dropdown: 200;
  --mv-z-drawer: 300;
  --mv-z-modal: 400;
  --mv-z-toast: 500;
  --mv-z-coachmark: 600;
}

/* Nuevo Tema Seleccionable aprobado por el Dueño: Confianza + Energía */
[data-mv-tema="confianza-energia"],
.mv-sitio[data-mv-tema="confianza-energia"],
.mv-tema-confianza-energia {
  --mv-brand-header-bg: linear-gradient(135deg, #0C256F 0%, #1E3A8A 100%);
  --mv-brand-header-solid: #0C256F;
  --mv-brand-header-end: #1E3A8A;
  --mv-brand-header-fg: #FFFFFF;
  --mv-brand-header-muted: #DBEAFE;

  --mv-brand-primary: #2563EB;
  --mv-brand-primary-hover: #1D4ED8;
  --mv-brand-primary-soft: #EFF6FF;
  --mv-brand-primary-border: #DBEAFE;

  --mv-brand-energy: #EA580C;
  --mv-brand-energy-hover: #C2410C;
  --mv-brand-energy-soft: #FFF7ED;
  --mv-brand-energy-border: #FFEDD5;

  --mv-success: #059669;
  --mv-success-soft: #ECFDF5;
  --mv-success-border: #A7F3D0;

  --mv-warning: #D97706;
  --mv-warning-soft: #FFFBEB;
  --mv-danger: #DC2626;
  --mv-danger-soft: #FEF2F2;

  --mv-bg-page: #F1F5F9;
  --mv-bg-surface: #FFFFFF;
  --mv-bg-subtle: #F8FAFC;
  --mv-bg-elevated: #FFFFFF;
  --mv-bg-dark: #0F172A;

  --mv-border: #E2E8F0;
  --mv-border-subtle: #F1F5F9;
  --mv-border-strong: #CBD5E1;

  --mv-text-primary: #0F172A;
  --mv-text-secondary: #475569;
  --mv-text-muted: #64748B;
  --mv-text-inverse: #FFFFFF;

  /* Sincronización con tokens de mv.css */
  --mv-marino: #0C256F;
  --mv-azul: #2563EB;
  --mv-azul-ml: #2563EB;
  --mv-azul-ml-hover: #1D4ED8;
  --mv-verde-ml: #059669;
  --mv-verde-ml-fondo: #ECFDF5;
  --mv-fondo: #F1F5F9;
  --mv-fondo-ml: #F1F5F9;
  --mv-superficie: #FFFFFF;
  --mv-texto: #0F172A;
  --mv-texto-secundario: #475569;
  --mv-linea: #E2E8F0;
  --mv-accion: #EA580C;
  --mv-accion-texto: #FFFFFF;
  --mv-enlace: #2563EB;
  --mv-exito: #059669;
  --mv-exito-fondo: #ECFDF5;
}

/* --------------------------------------------------------------------------
   2. RESET ESCOPADO, CONTENEDORES Y ACCESIBILIDAD WCAG 2.1 AA
   -------------------------------------------------------------------------- */
.mv-app-shell,
.mv-page {
  background-color: var(--mv-bg-page);
  color: var(--mv-text-primary);
  font-family: var(--mv-font-sans);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.mv-app-shell *,
.mv-app-shell *::before,
.mv-app-shell *::after {
  box-sizing: border-box;
}

.mv-container {
  width: 100%;
  max-width: var(--mv-container-max);
  margin-inline: auto;
  padding-inline: var(--mv-space-4);
}

.mv-section {
  margin-block: var(--mv-space-6);
}

.mv-tabular-nums {
  font-variant-numeric: tabular-nums;
}

.mv-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip Links y Barra de Atajos de Teclado (WCAG AA) */
.mv-a11y-bar {
  position: relative;
  z-index: 999;
}

.mv-a11y-skip {
  position: absolute;
  top: -100px;
  left: var(--mv-space-4);
  background: var(--mv-bg-dark);
  color: var(--mv-text-inverse);
  padding: var(--mv-space-2) var(--mv-space-4);
  border-radius: var(--mv-radius-md);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--mv-shadow-overlay);
  transition: top 150ms ease;
}

.mv-a11y-skip:focus {
  top: var(--mv-space-2);
  outline: 2px solid var(--mv-brand-energy);
  outline-offset: 2px;
}

.mv-app-shell :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--mv-brand-primary);
  outline-offset: 2px;
  box-shadow: var(--mv-focus-ring);
}

/* Botones canónicos reutilizables */
.mv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mv-space-2);
  min-height: 42px;
  padding: 10px 20px;
  border-radius: var(--mv-radius-md);
  font-family: var(--mv-font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 100ms ease;
}

.mv-btn:active {
  transform: scale(0.99);
}

.mv-btn--primary {
  background-color: var(--mv-brand-primary);
  color: #FFFFFF;
}

.mv-btn--primary:hover {
  background-color: var(--mv-brand-primary-hover);
  color: #FFFFFF;
}

.mv-btn--secondary {
  background-color: var(--mv-brand-primary-soft);
  color: var(--mv-brand-primary);
  border-color: var(--mv-brand-primary-border);
}

.mv-btn--secondary:hover {
  background-color: #DBEAFE;
  color: var(--mv-brand-primary-hover);
}

.mv-btn--energy {
  background-color: var(--mv-brand-energy);
  color: #FFFFFF;
}

.mv-btn--energy:hover {
  background-color: var(--mv-brand-energy-hover);
  color: #FFFFFF;
}

.mv-btn--ghost {
  background-color: transparent;
  color: var(--mv-text-primary);
  border-color: var(--mv-border);
}

.mv-btn--ghost:hover {
  background-color: var(--mv-bg-subtle);
}

.mv-btn--sm {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 16px;
}

.mv-btn--lg {
  min-height: 48px;
  padding: 12px 24px;
  font-size: 16px;
}

.mv-btn--block {
  width: 100%;
}

/* Badges comerciales propios */
.mv-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--mv-radius-xs);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.2;
}

.mv-badge--oportunidad,
.mv-badge--deal {
  background-color: var(--mv-brand-primary);
  color: #FFFFFF;
}

.mv-badge--mas-vendido,
.mv-badge--energy {
  background-color: var(--mv-brand-energy);
  color: #FFFFFF;
}

.mv-badge--despacho-express,
.mv-badge--success {
  background-color: var(--mv-success-soft);
  color: var(--mv-success);
  border: 1px solid var(--mv-success-border);
}

.mv-badge--club-mv {
  background: linear-gradient(90deg, #0C256F 0%, #2563EB 55%, #EA580C 100%);
  color: #FFFFFF;
}

.mv-badge--vendedor-destacado {
  background-color: #FEF3C7;
  color: #92400E;
  border: 1px solid #FDE68A;
}

.mv-badge--pago-protegido {
  background-color: var(--mv-brand-primary-soft);
  color: var(--mv-brand-primary);
  border: 1px solid var(--mv-brand-primary-border);
}

/* --------------------------------------------------------------------------
   3. GRUPO A · BLOQUES DE LAYOUT Y SISTEMA (17 COMPONENTES)
   -------------------------------------------------------------------------- */

/* A1. SiteHeader (2 filas, Azul Noche Confianza, sticky en mobile) */
.mv-site-header {
  background: var(--mv-brand-header-bg);
  color: var(--mv-brand-header-fg);
  position: sticky;
  top: 0;
  z-index: var(--mv-z-header);
  box-shadow: 0 2px 10px rgba(12, 37, 111, 0.22);
}

@media (min-width: 1024px) {
  .mv-site-header--static-desktop {
    position: relative;
  }
}

.mv-site-header__inner {
  max-width: var(--mv-container-max);
  margin-inline: auto;
  padding: 10px var(--mv-space-4);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mv-site-header__row1 {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--mv-space-4);
}

.mv-site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #FFFFFF;
  text-decoration: none;
  font-family: var(--mv-font-display);
}

.mv-site-header__logo-mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #2563EB 0%, #EA580C 100%);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.mv-site-header__brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.mv-site-header__brand-name {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #FFFFFF;
}

.mv-site-header__brand-tag {
  font-size: 15px;
  font-weight: 600;
  color: var(--mv-brand-header-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mv-site-header__promo-slot {
  display: inline-flex;
  align-items: center;
  gap: var(--mv-space-2);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--mv-radius-pill);
  padding: 6px 14px;
  color: #FFFFFF;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 150ms ease;
}

.mv-site-header__promo-slot:hover {
  background: rgba(255, 255, 255, 0.2);
}

.mv-site-header__promo-pill {
  background: var(--mv-brand-energy);
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: var(--mv-radius-pill);
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
}

.mv-site-header__row2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mv-space-4);
  flex-wrap: wrap;
  font-size: 16px;
}

.mv-site-header__location-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--mv-radius-md);
  padding: 5px 10px;
  color: #FFFFFF;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.15;
}

.mv-site-header__location-btn:hover {
  background: rgba(255, 255, 255, 0.16);
}

.mv-site-header__location-sub {
  display: block;
  font-size: 15px;
  color: var(--mv-brand-header-muted);
}

.mv-site-header__location-main {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #FFFFFF;
}

.mv-site-header__nav {
  display: flex;
  align-items: center;
  gap: var(--mv-space-4);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.mv-site-header__nav-link {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 2px;
}

.mv-site-header__nav-link:hover {
  color: #FFFFFF;
}

.mv-site-header__user-bar {
  display: flex;
  align-items: center;
  gap: var(--mv-space-3);
  flex-wrap: wrap;
}

.mv-site-header__action-link {
  color: #FFFFFF;
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

.mv-site-header__counter {
  background: var(--mv-brand-energy);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding-inline: 5px;
  border-radius: var(--mv-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Conmutador rápido de Tema en la barra superior */
.mv-theme-switcher {
  display: inline-flex;
  align-items: center;
  background: rgba(15, 23, 42, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--mv-radius-pill);
  padding: 2px;
  gap: 2px;
}

.mv-theme-switcher__btn {
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--mv-radius-pill);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mv-theme-switcher__btn--active,
.mv-theme-switcher__btn[aria-pressed="true"] {
  background: #FFFFFF;
  color: #0C256F;
  font-weight: 700;
}

/* A2. SearchBox (Buscador ancho con selector de alcance y autocompletado) */
.mv-search-box {
  position: relative;
  width: 100%;
}

.mv-search-box__form {
  display: flex;
  align-items: stretch;
  width: 100%;
  background: #FFFFFF;
  border-radius: var(--mv-radius-md);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
  overflow: hidden;
  border: 2px solid transparent;
}

.mv-search-box__form:focus-within {
  border-color: var(--mv-brand-energy);
}

.mv-search-box__input {
  flex: 1 1 auto;
  border: 0;
  padding: 10px 14px;
  font-size: 15px;
  color: var(--mv-text-primary);
  background: transparent;
  min-width: 0;
}

.mv-search-box__input:focus {
  outline: none;
}

.mv-search-box__scope {
  border: 0;
  border-left: 1px solid var(--mv-border);
  background: var(--mv-bg-subtle);
  color: var(--mv-text-secondary);
  font-size: 15px;
  font-weight: 600;
  padding-inline: 10px;
  cursor: pointer;
}

.mv-search-box__submit {
  border: 0;
  border-left: 1px solid var(--mv-border);
  background: #FFFFFF;
  color: var(--mv-text-secondary);
  padding-inline: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mv-search-box__submit:hover {
  color: var(--mv-brand-primary);
  background: var(--mv-bg-subtle);
}

.mv-search-box__suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--mv-bg-surface);
  color: var(--mv-text-primary);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-md);
  box-shadow: var(--mv-shadow-overlay);
  z-index: var(--mv-z-dropdown);
  padding: var(--mv-space-2) 0;
  display: none;
}

.mv-search-box--open .mv-search-box__suggestions {
  display: block;
}

.mv-search-box__suggestion-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  color: var(--mv-text-primary);
  text-decoration: none;
  font-size: 16px;
}

.mv-search-box__suggestion-item:hover {
  background: var(--mv-brand-primary-soft);
}

/* A3. LocationPicker Modal (Elegí una dirección / CP argentino) */
.mv-location-picker {
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-4);
}

.mv-location-picker__addresses {
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-3);
}

.mv-location-picker__address-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mv-space-3);
  padding: var(--mv-space-3) var(--mv-space-4);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-md);
  background: var(--mv-bg-surface);
  cursor: pointer;
}

.mv-location-picker__address-card--active {
  border-color: var(--mv-brand-primary);
  background: var(--mv-brand-primary-soft);
}

.mv-location-picker__cp-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mv-space-3);
  padding-top: var(--mv-space-3);
  border-top: 1px solid var(--mv-border);
}

.mv-location-picker__cp-input {
  width: 150px;
  padding: 10px 12px;
  border: 1px solid var(--mv-border-strong);
  border-radius: var(--mv-radius-md);
  font-size: 15px;
  font-family: var(--mv-font-mono);
}

/* A4. MegaMenu de 2 paneles (Lista vertical oscura + grilla blanca de subcategorías) */
.mv-mega-menu {
  position: relative;
}

.mv-mega-menu__flyout {
  display: grid;
  grid-template-columns: 260px 1fr;
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  box-shadow: var(--mv-shadow-overlay);
  overflow: hidden;
  min-height: 420px;
  color: var(--mv-text-primary);
}

.mv-mega-menu__rail {
  background: #1E293B;
  color: #F8FAFC;
  list-style: none;
  margin: 0;
  padding: var(--mv-space-2) 0;
}

.mv-mega-menu__rail-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  color: #F8FAFC;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
}

.mv-mega-menu__rail-item:hover,
.mv-mega-menu__rail-item--active {
  background: var(--mv-brand-primary);
  color: #FFFFFF;
}

.mv-mega-menu__panel {
  padding: var(--mv-space-6);
  background: var(--mv-bg-surface);
}

.mv-mega-menu__panel-title {
  font-family: var(--mv-font-display);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 var(--mv-space-4);
  padding-bottom: var(--mv-space-3);
  border-bottom: 1px solid var(--mv-border);
  color: var(--mv-text-primary);
}

.mv-mega-menu__columns {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--mv-space-6);
}

.mv-mega-menu__group-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--mv-text-primary);
  margin: 0 0 var(--mv-space-2);
  display: block;
  text-decoration: none;
}

.mv-mega-menu__sublist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mv-mega-menu__sublink {
  color: var(--mv-text-secondary);
  text-decoration: none;
  font-size: 16px;
}

.mv-mega-menu__sublink:hover {
  color: var(--mv-brand-primary);
}

/* A5. UserMenu con selector Multi-Cuenta */
.mv-user-menu {
  background: var(--mv-bg-surface);
  color: var(--mv-text-primary);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  box-shadow: var(--mv-shadow-overlay);
  width: 320px;
  overflow: hidden;
}

.mv-user-menu__profile {
  display: flex;
  align-items: center;
  gap: var(--mv-space-3);
  padding: var(--mv-space-4);
  background: var(--mv-bg-subtle);
  border-bottom: 1px solid var(--mv-border);
}

.mv-user-menu__avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--mv-radius-pill);
  background: var(--mv-brand-primary);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
}

.mv-user-menu__accounts {
  padding: var(--mv-space-3) var(--mv-space-4);
  border-bottom: 1px solid var(--mv-border);
  background: #FFFFFF;
}

.mv-user-menu__accounts-title {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mv-text-muted);
  margin-bottom: var(--mv-space-2);
}

.mv-user-menu__account-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: var(--mv-radius-md);
  text-decoration: none;
  color: var(--mv-text-primary);
  font-size: 16px;
}

.mv-user-menu__account-item:hover {
  background: var(--mv-brand-primary-soft);
}

.mv-user-menu__account-item--active {
  background: var(--mv-brand-primary-soft);
  font-weight: 600;
  color: var(--mv-brand-primary);
}

.mv-user-menu__nav {
  list-style: none;
  margin: 0;
  padding: var(--mv-space-2) 0;
}

.mv-user-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 16px;
  color: var(--mv-text-primary);
  text-decoration: none;
  font-size: 16px;
}

.mv-user-menu__link:hover {
  background: var(--mv-bg-subtle);
  color: var(--mv-brand-primary);
}

/* A6. AccountSidebar (Colapsado 56px y Expandido 240px) */
.mv-account-layout {
  display: grid;
  grid-template-columns: auto 1fr;
  min-height: calc(100dvh - var(--mv-header-height-desktop));
  background: var(--mv-bg-page);
}

.mv-account-sidebar {
  background: var(--mv-bg-surface);
  border-right: 1px solid var(--mv-border);
  display: flex;
  flex-direction: column;
  transition: width 180ms ease;
  width: var(--mv-account-sidebar-width);
}

.mv-account-sidebar--collapsed {
  width: var(--mv-account-rail-width);
}

.mv-account-sidebar--expanded {
  width: var(--mv-account-sidebar-width);
}

.mv-account-sidebar__header {
  display: flex;
  align-items: center;
  gap: var(--mv-space-3);
  padding: 14px 16px;
  border-bottom: 1px solid var(--mv-border);
  font-weight: 700;
  color: var(--mv-text-primary);
}

.mv-account-sidebar__list {
  list-style: none;
  margin: 0;
  padding: var(--mv-space-2) 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mv-account-sidebar__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  color: var(--mv-text-secondary);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  border-left: 3px solid transparent;
  white-space: nowrap;
  overflow: hidden;
}

.mv-account-sidebar__item:hover {
  background: var(--mv-bg-subtle);
  color: var(--mv-text-primary);
}

.mv-account-sidebar__item--active {
  border-left-color: var(--mv-brand-primary);
  background: var(--mv-brand-primary-soft);
  color: var(--mv-brand-primary);
  font-weight: 600;
}

.mv-account-sidebar--collapsed .mv-account-sidebar__label,
.mv-account-sidebar--collapsed .mv-account-sidebar__badge {
  display: none;
}

/* A7. SiteFooter (Bloque SEO, Índice A-Z, Pestaña Más información ⌃, 7 Columnas) */
.mv-site-footer {
  background: var(--mv-bg-surface);
  border-top: 1px solid var(--mv-border);
  margin-top: auto;
  color: var(--mv-text-secondary);
  font-size: 16px;
}

.mv-site-footer__seo {
  max-width: var(--mv-container-max);
  margin-inline: auto;
  padding: var(--mv-space-6) var(--mv-space-4);
  border-bottom: 1px solid var(--mv-border);
}

.mv-site-footer__seo-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--mv-text-primary);
  margin: 0 0 var(--mv-space-3);
}

.mv-site-footer__keywords {
  line-height: 1.8;
  color: var(--mv-text-muted);
  margin-bottom: var(--mv-space-4);
}

.mv-site-footer__keyword-link {
  color: var(--mv-text-secondary);
  text-decoration: none;
}

.mv-site-footer__keyword-link:hover {
  color: var(--mv-brand-primary);
  text-decoration: underline;
}

.mv-site-footer__az {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.mv-site-footer__az-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--mv-radius-xs);
  border: 1px solid var(--mv-border);
  color: var(--mv-text-secondary);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
}

.mv-site-footer__az-link:hover {
  background: var(--mv-brand-primary);
  color: #FFFFFF;
  border-color: var(--mv-brand-primary);
}

.mv-site-footer__more-details {
  border-bottom: 1px solid var(--mv-border);
  background: var(--mv-bg-subtle);
}

.mv-site-footer__more-summary {
  list-style: none;
  display: flex;
  justify-content: center;
  padding: 10px;
  cursor: pointer;
}

.mv-site-footer__more-summary::-webkit-details-marker {
  display: none;
}

.mv-site-footer__more-pill {
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-md);
  padding: 6px 18px;
  font-size: 16px;
  font-weight: 600;
  color: var(--mv-text-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mv-site-footer__columns {
  max-width: var(--mv-container-max);
  margin-inline: auto;
  padding: var(--mv-space-6) var(--mv-space-4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--mv-space-6);
}

.mv-site-footer__col-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--mv-text-primary);
  margin: 0 0 var(--mv-space-3);
}

.mv-site-footer__col-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mv-site-footer__col-link {
  color: var(--mv-text-secondary);
  text-decoration: none;
}

.mv-site-footer__col-link:hover {
  color: var(--mv-brand-primary);
}

.mv-site-footer__legal-bar {
  max-width: var(--mv-container-max);
  margin-inline: auto;
  padding: var(--mv-space-5) var(--mv-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-2);
}

.mv-site-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mv-space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.mv-site-footer__legal-link {
  color: var(--mv-text-primary);
  text-decoration: none;
  font-size: 15px;
}

.mv-site-footer__legal-link:hover {
  color: var(--mv-brand-primary);
}

/* A8. LegalNotices (Botón de arrepentimiento + Ley 24.240 Defensa del Consumidor) */
.mv-legal-notices {
  max-width: var(--mv-container-max);
  margin-inline: auto;
  padding: var(--mv-space-4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--mv-space-4);
}

.mv-legal-notices__box {
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-md);
  padding: var(--mv-space-4) var(--mv-space-5);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.mv-legal-notices__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--mv-text-secondary);
  margin: 0;
}

.mv-legal-notices__link {
  color: var(--mv-brand-primary);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

.mv-legal-notices__link:hover {
  text-decoration: underline;
}

/* A9. CookieBanner y Modal CookiePreferences */
.mv-cookie-banner {
  position: fixed;
  bottom: var(--mv-space-4);
  left: var(--mv-space-4);
  right: var(--mv-space-4);
  max-width: 960px;
  margin-inline: auto;
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  box-shadow: var(--mv-shadow-overlay);
  padding: var(--mv-space-4) var(--mv-space-5);
  z-index: var(--mv-z-toast);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mv-space-4);
}

.mv-cookie-banner__text {
  flex: 1 1 420px;
  font-size: 16px;
  color: var(--mv-text-secondary);
}

.mv-cookie-banner__actions {
  display: flex;
  align-items: center;
  gap: var(--mv-space-2);
}

.mv-cookie-prefs__item {
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-md);
  padding: var(--mv-space-4);
  background: var(--mv-bg-surface);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mv-space-4);
}

/* A10. Breadcrumb */
.mv-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mv-space-2);
  font-size: 16px;
  color: var(--mv-text-secondary);
  padding-block: var(--mv-space-3);
}

.mv-breadcrumb__back {
  color: var(--mv-text-primary);
  font-weight: 600;
  text-decoration: none;
  padding-right: var(--mv-space-3);
  border-right: 1px solid var(--mv-border);
}

.mv-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mv-breadcrumb__link {
  color: var(--mv-brand-primary);
  text-decoration: none;
}

.mv-breadcrumb__link:hover {
  text-decoration: underline;
}

/* A11. EmptyState */
.mv-empty-state {
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  padding: var(--mv-space-10) var(--mv-space-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mv-space-3);
  max-width: 560px;
  margin-inline: auto;
}

.mv-empty-state__icon {
  width: 84px;
  height: 84px;
  border-radius: var(--mv-radius-pill);
  background: var(--mv-bg-subtle);
  color: var(--mv-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mv-empty-state__title {
  font-family: var(--mv-font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--mv-text-primary);
}

.mv-empty-state__text {
  font-size: 16px;
  color: var(--mv-text-secondary);
  max-width: 42ch;
}

/* A12. Skeleton (con respeto de prefers-reduced-motion) */
@keyframes mv-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.mv-skeleton {
  display: grid;
  gap: var(--mv-space-4);
}

.mv-skeleton__block {
  background: linear-gradient(90deg, #E2E8F0 25%, #F1F5F9 50%, #E2E8F0 75%);
  background-size: 200% 100%;
  animation: mv-shimmer 1.6s infinite linear;
  border-radius: var(--mv-radius-md);
}

.mv-skeleton__block--media { height: 180px; }
.mv-skeleton__block--title { height: 18px; width: 80%; }
.mv-skeleton__block--price { height: 26px; width: 50%; }
.mv-skeleton__block--line { height: 14px; width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .mv-skeleton__block {
    animation: none;
    background: #E2E8F0;
  }
}

/* A13. Snackbar («Deshacer») */
.mv-snackbar {
  background: #0F172A;
  color: #FFFFFF;
  border-radius: var(--mv-radius-md);
  padding: 12px 18px;
  box-shadow: var(--mv-shadow-overlay);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mv-space-6);
  font-size: 16px;
}

.mv-snackbar__action {
  background: transparent;
  border: 0;
  color: #60A5FA;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.mv-snackbar__action:hover {
  text-decoration: underline;
}

/* A14. Coachmark / Tour */
.mv-coachmark {
  background: var(--mv-brand-header-solid);
  color: #FFFFFF;
  border-radius: var(--mv-radius-lg);
  padding: var(--mv-space-4);
  box-shadow: var(--mv-shadow-overlay);
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-2);
}

.mv-coachmark__title {
  font-weight: 700;
  font-size: 15px;
}

.mv-coachmark__text {
  font-size: 16px;
  color: var(--mv-brand-header-muted);
}

/* A15 & A16. Drawer y Modal */
.mv-drawer,
.mv-modal {
  position: relative;
  z-index: var(--mv-z-modal);
}

.mv-drawer__panel,
.mv-modal__dialog {
  background: var(--mv-bg-surface);
  color: var(--mv-text-primary);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  box-shadow: var(--mv-shadow-overlay);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mv-modal--sm .mv-modal__dialog { max-width: 420px; }
.mv-modal--md .mv-modal__dialog { max-width: 600px; }
.mv-modal--lg .mv-modal__dialog { max-width: 860px; }

.mv-drawer__header,
.mv-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--mv-space-4) var(--mv-space-5);
  border-bottom: 1px solid var(--mv-border);
}

.mv-drawer__title,
.mv-modal__title {
  font-family: var(--mv-font-display);
  font-size: 18px;
  font-weight: 700;
}

.mv-drawer__body,
.mv-modal__body {
  padding: var(--mv-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-4);
}

.mv-drawer__footer,
.mv-modal__footer {
  padding: var(--mv-space-4) var(--mv-space-5);
  border-top: 1px solid var(--mv-border);
  background: var(--mv-bg-subtle);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--mv-space-3);
}

/* A17. Page404 */
.mv-page-404 {
  max-width: 720px;
  margin: var(--mv-space-10) auto;
  padding: var(--mv-space-8) var(--mv-space-6);
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-xl);
  box-shadow: var(--mv-shadow-card);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mv-space-4);
}

.mv-page-404__code {
  font-family: var(--mv-font-mono);
  font-size: 15px;
  color: var(--mv-text-muted);
  background: var(--mv-bg-subtle);
  padding: 4px 10px;
  border-radius: var(--mv-radius-pill);
}

/* --------------------------------------------------------------------------
   4. GRUPO B · BLOQUES DE MERCHANDISING, HOME Y LANDINGS (15 COMPONENTES)
   -------------------------------------------------------------------------- */

/* B1. HeroCarousel con degradado inferior hacia --mv-bg-page */
.mv-hero-carousel {
  position: relative;
  overflow: hidden;
  padding-bottom: 72px;
  background: linear-gradient(180deg, #0C256F 0%, #1E3A8A 62%, var(--mv-bg-page) 100%);
  color: #FFFFFF;
}

.mv-hero-carousel--energia {
  background: linear-gradient(180deg, #1E3A8A 0%, #EA580C 62%, var(--mv-bg-page) 100%);
}

.mv-hero-carousel--esmeralda {
  background: linear-gradient(180deg, #0C256F 0%, #059669 62%, var(--mv-bg-page) 100%);
}

.mv-hero-carousel__inner {
  max-width: var(--mv-container-max);
  margin-inline: auto;
  padding: var(--mv-space-8) var(--mv-space-4);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: var(--mv-space-6);
}

@media (max-width: 768px) {
  .mv-hero-carousel__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.mv-hero-carousel__eyebrow {
  display: inline-block;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(255, 255, 255, 0.16);
  padding: 4px 12px;
  border-radius: var(--mv-radius-pill);
  margin-bottom: var(--mv-space-3);
}

.mv-hero-carousel__title {
  font-family: var(--mv-font-display);
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 var(--mv-space-3);
  color: #FFFFFF;
}

.mv-hero-carousel__subtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 var(--mv-space-5);
}

.mv-hero-carousel__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mv-space-3);
  align-items: center;
}

.mv-hero-carousel__pill-primary {
  background: #FFFFFF;
  color: #0C256F;
  font-weight: 800;
  padding: 10px 20px;
  border-radius: var(--mv-radius-pill);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mv-hero-carousel__pill-discount {
  background: var(--mv-brand-energy);
  color: #FFFFFF;
  font-weight: 800;
  padding: 10px 20px;
  border-radius: var(--mv-radius-pill);
}

.mv-hero-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: var(--mv-space-4);
}

.mv-hero-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--mv-radius-pill);
  background: rgba(255, 255, 255, 0.45);
  border: 0;
  padding: 0;
}

.mv-hero-carousel__dot--active {
  width: 22px;
  background: #FFFFFF;
}

/* B2. QuickAccessCards (6 tarjetas blancas superpuestas -64px al pie del Hero) */
.mv-quick-access {
  max-width: var(--mv-container-max);
  margin-inline: auto;
  padding-inline: var(--mv-space-4);
  position: relative;
  z-index: 5;
}

.mv-quick-access--overlap {
  margin-top: -64px;
}

.mv-quick-access__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(165px, 1fr));
  gap: var(--mv-space-3);
  overflow-x: auto;
  padding-bottom: var(--mv-space-2);
}

.mv-quick-access__card {
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  box-shadow: var(--mv-shadow-card);
  padding: var(--mv-space-4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--mv-space-3);
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.mv-quick-access__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--mv-shadow-hover);
}

.mv-quick-access__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--mv-text-primary);
  margin: 0;
}

.mv-quick-access__icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: var(--mv-radius-lg);
  background: var(--mv-brand-primary-soft);
  color: var(--mv-brand-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
}

.mv-quick-access__text {
  font-size: 15px;
  color: var(--mv-text-secondary);
  text-align: center;
  margin: 0;
}

/* B3. PromoBannerGrid / PromoBannerPair */
.mv-promo-grid {
  display: grid;
  gap: var(--mv-space-4);
}

.mv-promo-grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.mv-promo-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.mv-promo-grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.mv-promo-banner {
  border-radius: var(--mv-radius-lg);
  overflow: hidden;
  padding: var(--mv-space-6);
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  gap: var(--mv-space-4);
  box-shadow: var(--mv-shadow-card);
  border: 1px solid var(--mv-border);
  background: var(--mv-bg-surface);
  color: var(--mv-text-primary);
}

.mv-promo-banner--dark {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  color: #FFFFFF;
  border-color: #1E293B;
}

.mv-promo-banner--brand {
  background: linear-gradient(135deg, #0C256F 0%, #2563EB 100%);
  color: #FFFFFF;
  border-color: #1E3A8A;
}

.mv-promo-banner__eyebrow {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}

.mv-promo-banner__title {
  font-family: var(--mv-font-display);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  margin: 6px 0 14px;
}

/* B4. LoyaltyBanner (Club MercadoVentas) */
.mv-loyalty-banner {
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  box-shadow: var(--mv-shadow-card);
  overflow: hidden;
}

.mv-loyalty-banner__header {
  background: linear-gradient(90deg, #0C256F 0%, #2563EB 60%, #EA580C 100%);
  color: #FFFFFF;
  padding: var(--mv-space-4) var(--mv-space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mv-space-4);
}

.mv-loyalty-banner__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--mv-space-3);
  font-family: var(--mv-font-display);
  font-size: 20px;
  font-weight: 800;
}

.mv-loyalty-banner__benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--mv-space-4);
  padding: var(--mv-space-5) var(--mv-space-6);
}

.mv-loyalty-banner__benefit {
  display: flex;
  align-items: center;
  gap: var(--mv-space-3);
  font-size: 16px;
  color: var(--mv-text-primary);
}

/* B5. VideoPromo (1/3 copy izquierda + 2/3 reproductor derecha) */
.mv-video-promo {
  background: #0F172A;
  color: #FFFFFF;
  border-radius: var(--mv-radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 2fr;
  box-shadow: var(--mv-shadow-card);
}

@media (max-width: 768px) {
  .mv-video-promo {
    grid-template-columns: 1fr;
  }
}

.mv-video-promo__copy {
  padding: var(--mv-space-8) var(--mv-space-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--mv-space-4);
}

.mv-video-promo__stage {
  background: linear-gradient(135deg, #1E293B 0%, #0C256F 100%);
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mv-space-6);
  position: relative;
}

/* B6. BenefitCarousel & B7. BrandBanner */
.mv-section-card {
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  box-shadow: var(--mv-shadow-card);
  padding: var(--mv-space-6);
}

.mv-section-card__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mv-space-4);
  margin-bottom: var(--mv-space-5);
}

.mv-section-card__title {
  font-family: var(--mv-font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--mv-text-primary);
  margin: 0;
}

.mv-benefit-carousel__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--mv-space-4);
}

.mv-benefit-card {
  border-radius: var(--mv-radius-lg);
  padding: var(--mv-space-5);
  color: #FFFFFF;
  background: linear-gradient(135deg, #0C256F 0%, #2563EB 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 170px;
  text-decoration: none;
}

.mv-benefit-card--energia {
  background: linear-gradient(135deg, #9A3412 0%, #EA580C 100%);
}

.mv-benefit-card--esmeralda {
  background: linear-gradient(135deg, #065F46 0%, #059669 100%);
}

.mv-brand-banner__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--mv-space-4);
}

.mv-brand-card {
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  padding: var(--mv-space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mv-space-4);
  text-decoration: none;
  color: var(--mv-text-primary);
  box-shadow: var(--mv-shadow-card);
}

/* B8. CategoryTileCarousel (Grilla 4x2 de categorías destacadas) */
.mv-category-tiles__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--mv-space-3);
}

@media (max-width: 900px) {
  .mv-category-tiles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.mv-category-tile {
  display: flex;
  align-items: center;
  gap: var(--mv-space-3);
  padding: var(--mv-space-4);
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-md);
  text-decoration: none;
  color: var(--mv-text-primary);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.mv-category-tile:hover {
  border-color: var(--mv-brand-primary);
  box-shadow: var(--mv-shadow-card);
  color: var(--mv-brand-primary);
}

.mv-category-tile__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--mv-radius-md);
  background: var(--mv-bg-subtle);
  color: var(--mv-brand-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mv-category-tile__name {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

/* B9. CategoryHero (Landing editorial de categoría) */
.mv-category-hero {
  background: linear-gradient(135deg, #0C256F 0%, #2563EB 100%);
  color: #FFFFFF;
  border-radius: var(--mv-radius-xl);
  padding: var(--mv-space-8) var(--mv-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-6);
}

.mv-category-hero__subcats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--mv-space-3);
}

.mv-category-hero__subcat-pill {
  background: var(--mv-bg-surface);
  color: var(--mv-text-primary);
  border-radius: var(--mv-radius-lg);
  padding: var(--mv-space-3);
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  box-shadow: var(--mv-shadow-card);
}

/* B10 & B11. ProductCarousel y ProductGrid */
.mv-product-carousel__track {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--mv-space-4);
}

.mv-product-grid {
  display: grid;
  gap: var(--mv-space-4);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.mv-product-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mv-product-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mv-product-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 960px) {
  .mv-product-grid--3,
  .mv-product-grid--4,
  .mv-product-grid--6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* B12. TrustBadges (Pago Protegido MV + Despacho Express) */
.mv-trust-badges {
  background: var(--mv-bg-surface);
  border-top: 1px solid var(--mv-border);
  border-bottom: 1px solid var(--mv-border);
  padding-block: var(--mv-space-8);
}

.mv-trust-badges__grid {
  max-width: var(--mv-container-max);
  margin-inline: auto;
  padding-inline: var(--mv-space-4);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mv-space-6);
}

@media (max-width: 768px) {
  .mv-trust-badges__grid { grid-template-columns: 1fr; }
}

.mv-trust-badges__item {
  text-align: center;
  padding-inline: var(--mv-space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mv-space-2);
}

.mv-trust-badges__item + .mv-trust-badges__item {
  border-left: 1px solid var(--mv-border);
}

@media (max-width: 768px) {
  .mv-trust-badges__item + .mv-trust-badges__item {
    border-left: 0;
    border-top: 1px solid var(--mv-border);
    padding-top: var(--mv-space-4);
  }
}

.mv-trust-badges__title {
  font-family: var(--mv-font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--mv-text-primary);
  margin: 0;
}

.mv-trust-badges__text {
  font-size: 16px;
  color: var(--mv-text-secondary);
  margin: 0;
  max-width: 34ch;
}

/* B13 & B14. OfferTabs y CountdownBadge (Oportunidad del día) */
.mv-offer-tabs {
  background: var(--mv-bg-surface);
  border-bottom: 1px solid var(--mv-border);
  padding: var(--mv-space-5) var(--mv-space-4) 0;
}

.mv-offer-tabs__inner {
  max-width: var(--mv-container-max);
  margin-inline: auto;
}

.mv-offer-tabs__list {
  display: flex;
  align-items: stretch;
  gap: var(--mv-space-6);
  overflow-x: auto;
  list-style: none;
  margin: var(--mv-space-4) 0 0;
  padding: 0;
}

.mv-offer-tabs__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: var(--mv-space-2) var(--mv-space-3) var(--mv-space-3);
  color: var(--mv-text-secondary);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}

.mv-offer-tabs__tab--active {
  color: var(--mv-brand-primary);
  border-bottom-color: var(--mv-brand-primary);
}

.mv-countdown-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--mv-space-2);
  background: var(--mv-brand-energy-soft);
  border: 1px solid var(--mv-brand-energy-border);
  color: var(--mv-brand-energy);
  padding: 6px 12px;
  border-radius: var(--mv-radius-md);
  font-size: 15px;
  font-weight: 700;
}

.mv-countdown-badge__timer {
  font-family: var(--mv-font-mono);
  font-variant-numeric: tabular-nums;
  background: var(--mv-brand-energy);
  color: #FFFFFF;
  padding: 2px 6px;
  border-radius: var(--mv-radius-xs);
}

/* B15. SubStoreHeader (Súper MercadoVentas / Mayorista) */
.mv-substore-header {
  background: linear-gradient(135deg, #065F46 0%, #059669 100%);
  color: #FFFFFF;
  border-radius: var(--mv-radius-lg);
  padding: var(--mv-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-4);
}

.mv-substore-header__gondolas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mv-space-2);
}

.mv-substore-header__gondola-pill {
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  padding: 6px 14px;
  border-radius: var(--mv-radius-pill);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   5. GRUPO C · SRP Y PRODUCT CARD (12 ELEMENTOS ANATÓMICOS + LEY 27.743)
   -------------------------------------------------------------------------- */
.mv-srp-layout {
  max-width: var(--mv-container-max);
  margin-inline: auto;
  padding: var(--mv-space-4);
  display: grid;
  grid-template-columns: var(--mv-sidebar-filters-width) 1fr;
  gap: var(--mv-space-6);
  align-items: start;
}

@media (max-width: 960px) {
  .mv-srp-layout { grid-template-columns: 1fr; }
}

.mv-srp-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-4);
}

.mv-quick-toggle-card {
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-md);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mv-space-3);
}

.mv-facet-filter {
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-md);
  padding: var(--mv-space-4);
}

.mv-facet-filter__title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 var(--mv-space-2);
}

/* ProductCard: 12 Elementos Anatómicos */
.mv-product-card,
.mv-card {
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  box-shadow: var(--mv-shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.mv-product-card:hover,
.mv-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--mv-shadow-hover);
}

.mv-product-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--mv-bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mv-space-4);
  border-bottom: 1px solid var(--mv-border-subtle);
}

.mv-product-card__fav {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: var(--mv-radius-pill);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--mv-border);
  color: var(--mv-brand-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mv-product-card__body {
  padding: var(--mv-space-4);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.mv-product-card__store {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--mv-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mv-product-card__title {
  font-size: 16px;
  font-weight: 500;
  color: var(--mv-text-primary);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
}

.mv-product-card__rating {
  font-size: 15px;
  color: var(--mv-text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mv-product-card__old-price {
  font-size: 15px;
  color: var(--mv-text-muted);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

.mv-product-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.mv-product-card__price {
  font-family: var(--mv-font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--mv-text-primary);
  font-variant-numeric: tabular-nums;
}

.mv-product-card__discount {
  font-size: 16px;
  font-weight: 700;
  color: var(--mv-success);
}

.mv-product-card__tax-free {
  font-size: 15px;
  color: var(--mv-text-muted);
  font-variant-numeric: tabular-nums;
}

.mv-product-card__installments {
  font-size: 16px;
  font-weight: 600;
  color: var(--mv-success);
}

.mv-product-card__shipping {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--mv-success);
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   6. GRUPO D · FICHA DE PRODUCTO PDP DE 3 COLUMNAS (44% / 31% / 25%)
   -------------------------------------------------------------------------- */
.mv-pdp-layout {
  max-width: var(--mv-container-max);
  margin-inline: auto;
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  box-shadow: var(--mv-shadow-card);
  padding: var(--mv-space-6);
  display: grid;
  grid-template-columns: 44fr 31fr 25fr;
  gap: var(--mv-space-6);
  align-items: start;
}

@media (max-width: 1024px) {
  .mv-pdp-layout { grid-template-columns: 1fr; }
}

.mv-pdp-gallery {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--mv-space-3);
}

.mv-pdp-gallery__thumbs {
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-2);
}

.mv-pdp-gallery__thumb {
  width: 56px;
  height: 56px;
  border: 2px solid var(--mv-border);
  border-radius: var(--mv-radius-sm);
  padding: 2px;
  background: #FFFFFF;
  cursor: pointer;
}

.mv-pdp-gallery__thumb--active {
  border-color: var(--mv-brand-primary);
}

.mv-pdp-gallery__stage {
  aspect-ratio: 1 / 1;
  background: var(--mv-bg-subtle);
  border-radius: var(--mv-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mv-space-4);
}

.mv-price-block__current {
  font-family: var(--mv-font-display);
  font-size: 36px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--mv-text-primary);
}

.mv-price-block__tax-free {
  font-size: 15px;
  color: var(--mv-text-muted);
  margin-top: 4px;
}

.mv-quantity-tiers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mv-space-2);
  margin-block: var(--mv-space-3);
}

.mv-quantity-tier-pill {
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-md);
  padding: 8px 12px;
  background: var(--mv-bg-surface);
  cursor: pointer;
}

.mv-quantity-tier-pill--best {
  border-color: var(--mv-brand-primary);
  background: var(--mv-brand-primary-soft);
}

.mv-buy-box {
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  padding: var(--mv-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-4);
  position: sticky;
  top: 24px;
  background: var(--mv-bg-surface);
}

/* Termómetro de 5 segmentos de Vendedor Destacado MV */
.mv-thermometer {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  align-items: center;
  margin-block: var(--mv-space-2);
}

.mv-thermometer__seg {
  height: 8px;
  border-radius: 2px;
  opacity: 0.28;
}

.mv-thermometer__seg--active {
  height: 12px;
  opacity: 1;
}

.mv-thermometer__seg--1 { background: var(--mv-reputation-1); }
.mv-thermometer__seg--2 { background: var(--mv-reputation-2); }
.mv-thermometer__seg--3 { background: var(--mv-reputation-3); }
.mv-thermometer__seg--4 { background: var(--mv-reputation-4); }
.mv-thermometer__seg--5 { background: var(--mv-reputation-5); }

/* AttributesTable cebrada (#F8FAFC / #FFFFFF) */
.mv-attributes-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-md);
  overflow: hidden;
}

.mv-attributes-table tr:nth-child(odd) {
  background: #F8FAFC;
}

.mv-attributes-table tr:nth-child(even) {
  background: #FFFFFF;
}

.mv-attributes-table th,
.mv-attributes-table td {
  padding: 12px 16px;
  text-align: left;
  font-size: 16px;
  border-bottom: 1px solid var(--mv-border);
}

/* QnA con IA y Reviews con Resumen IA */
.mv-ai-callout {
  background: var(--mv-brand-primary-soft);
  border: 1px solid var(--mv-brand-primary-border);
  border-radius: var(--mv-radius-lg);
  padding: var(--mv-space-4);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* --------------------------------------------------------------------------
   7. GRUPO E · CARRITO MULTI-VENDEDOR ($ 33.000 ENVÍO GRATIS) Y CHECKOUT 1-PÁGINA
   -------------------------------------------------------------------------- */
.mv-cart-layout,
.mv-checkout-layout {
  max-width: var(--mv-container-max);
  margin-inline: auto;
  padding: var(--mv-space-6) var(--mv-space-4);
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--mv-space-6);
  align-items: start;
}

@media (max-width: 960px) {
  .mv-cart-layout,
  .mv-checkout-layout { grid-template-columns: 1fr; }
}

.mv-cart-group {
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  box-shadow: var(--mv-shadow-card);
  overflow: hidden;
  margin-bottom: var(--mv-space-4);
}

.mv-free-shipping-progress {
  padding: var(--mv-space-3) var(--mv-space-5);
  background: var(--mv-success-soft);
  border-top: 1px solid var(--mv-success-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mv-progress {
  width: 100%;
  height: 8px;
  border-radius: var(--mv-radius-pill);
  overflow: hidden;
  appearance: none;
  border: 0;
  background: #E2E8F0;
}

.mv-progress::-webkit-progress-bar {
  background: #E2E8F0;
  border-radius: var(--mv-radius-pill);
}

.mv-progress::-webkit-progress-value {
  background: var(--mv-success);
  border-radius: var(--mv-radius-pill);
}

.mv-progress::-moz-progress-bar {
  background: var(--mv-success);
  border-radius: var(--mv-radius-pill);
}

.mv-order-summary {
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  box-shadow: var(--mv-shadow-card);
  padding: var(--mv-space-5);
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-3);
}

/* --------------------------------------------------------------------------
   8. GRUPO F · CUPONES (TICKET TROQUELADO), CUENTA Y PANEL VENDEDOR / WIZARD
   -------------------------------------------------------------------------- */
.mv-coupons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: var(--mv-space-4);
}

.mv-coupon-card {
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  box-shadow: var(--mv-shadow-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.mv-coupon-card__top {
  padding: var(--mv-space-5);
  display: flex;
  gap: var(--mv-space-4);
  align-items: flex-start;
}

.mv-coupon-card__bottom {
  padding: var(--mv-space-3) var(--mv-space-5);
  border-top: 2px dashed var(--mv-border);
  background: var(--mv-bg-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mv-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--mv-space-3);
}

.mv-kpi-card {
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  padding: var(--mv-space-4);
  box-shadow: var(--mv-shadow-xs);
}

.mv-kpi-card__value {
  font-family: var(--mv-font-display);
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mv-form-section-card {
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  padding: var(--mv-space-5);
  box-shadow: var(--mv-shadow-card);
}

.mv-status-badge--completo {
  background: var(--mv-success-soft);
  color: var(--mv-success);
  padding: 3px 10px;
  border-radius: var(--mv-radius-pill);
  font-size: 15px;
  font-weight: 700;
}

.mv-status-badge--pendiente {
  background: var(--mv-warning-soft);
  color: var(--mv-warning);
  padding: 3px 10px;
  border-radius: var(--mv-radius-pill);
  font-size: 15px;
  font-weight: 700;
}

.mv-chip-sentence {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  background: var(--mv-bg-surface);
  border: 2px solid var(--mv-brand-primary);
  border-radius: var(--mv-radius-md);
}

.mv-chip-token {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--mv-radius-pill);
  background: var(--mv-brand-primary-soft);
  color: var(--mv-brand-primary);
  font-size: 16px;
  font-weight: 600;
}

/* Clases utilitarias de ancho porcentual para barras sin style inline */
.mv-w-0 { width: 0%; }
.mv-w-10 { width: 10%; }
.mv-w-20 { width: 20%; }
.mv-w-25 { width: 25%; }
.mv-w-30 { width: 30%; }
.mv-w-40 { width: 40%; }
.mv-w-50 { width: 50%; }
.mv-w-60 { width: 60%; }
.mv-w-70 { width: 70%; }
.mv-w-75 { width: 75%; }
.mv-w-80 { width: 80%; }
.mv-w-90 { width: 90%; }
.mv-w-100 { width: 100%; }

/* Dimensionamiento seguro para íconos SVG de línea 24x24 sin atributo width explícito */
.mv-sitio svg:not([width]),
.mv-app-shell svg:not([width]) {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  vertical-align: middle;
}
.mv-quick-access__icon svg:not([width]),
.mv-cat-grid__icon svg:not([width]),
.mv-empty-state__icon svg:not([width]) {
  width: 24px;
  height: 24px;
}
/* ==========================================================================
   MercadoVentas (mercadoventas.com.ar) sobre MercadoStudio (mercadostudio.com.ar)
   Hoja de Estilos Integral F1 a F7 · Cero Estilos Inline (CSP style-src 'self')
   Soporta Tema Actual ([data-mv-tema="actual"]) y Tema Nuevo Seleccionable
   ([data-mv-tema="confianza-energia"]: Azul Noche #0C256F -> #1E3A8A,
   Primario #2563EB, Energía #EA580C, Esmeralda #059669, Superficies #F1F5F9 / #FFFFFF)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS DE TEMA: ACTUAL (DEFAULT) Y CONFIANZA + ENERGÍA (SELECCIONABLE)
   -------------------------------------------------------------------------- */
:root,
.mv-sitio,
[data-mv-tema="actual"],
.mv-sitio[data-mv-tema="actual"] {
  --mv-brand-header-bg: linear-gradient(135deg, #0C256F 0%, #1647D8 100%);
  --mv-brand-header-solid: #0C256F;
  --mv-brand-header-end: #1647D8;
  --mv-brand-header-fg: #FFFFFF;
  --mv-brand-header-muted: #DBEAFE;

  --mv-brand-primary: #1647D8;
  --mv-brand-primary-hover: #133BBD;
  --mv-brand-primary-soft: #EAEEF9;
  --mv-brand-primary-border: #B8C7E2;

  --mv-brand-energy: #D97706;
  --mv-brand-energy-hover: #B45309;
  --mv-brand-energy-soft: #FDF3DF;
  --mv-brand-energy-border: #FDE68A;

  --mv-success: #0F7B43;
  --mv-success-soft: #E5F5EC;
  --mv-success-border: #A7F3D0;

  --mv-warning: #D97706;
  --mv-warning-soft: #FFFBEB;
  --mv-danger: #C0262D;
  --mv-danger-soft: #FCEBEC;

  --mv-bg-page: #F3F6FD;
  --mv-bg-surface: #FFFFFF;
  --mv-bg-subtle: #F8FAFC;
  --mv-bg-elevated: #FFFFFF;
  --mv-bg-dark: #0F172A;

  --mv-border: #D2DBED;
  --mv-border-subtle: #E2E8F0;
  --mv-border-strong: #B8C7E2;

  --mv-text-primary: #0D1528;
  --mv-text-secondary: #3C4865;
  --mv-text-muted: #5F6B88;
  --mv-text-inverse: #FFFFFF;

  --mv-reputation-1: #DC2626;
  --mv-reputation-2: #EA580C;
  --mv-reputation-3: #F59E0B;
  --mv-reputation-4: #84CC16;
  --mv-reputation-5: #059669;

  --mv-font-display: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mv-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mv-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

  --mv-space-1: 4px;
  --mv-space-2: 8px;
  --mv-space-3: 12px;
  --mv-space-4: 16px;
  --mv-space-5: 20px;
  --mv-space-6: 24px;
  --mv-space-8: 32px;
  --mv-space-10: 40px;
  --mv-space-12: 48px;

  --mv-radius-xs: 4px;
  --mv-radius-sm: 6px;
  --mv-radius-md: 8px;
  --mv-radius-lg: 12px;
  --mv-radius-xl: 16px;
  --mv-radius-pill: 999px;

  --mv-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --mv-shadow-card: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --mv-shadow-hover: 0 10px 24px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.06);
  --mv-shadow-overlay: 0 20px 48px rgba(15, 23, 42, 0.24);
  --mv-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.35);

  --mv-container-max: 1200px;
  --mv-header-height-desktop: 100px;
  --mv-header-height-mobile: 60px;
  --mv-sidebar-filters-width: 270px;
  --mv-account-rail-width: 56px;
  --mv-account-sidebar-width: 240px;
  --mv-buybox-width: 310px;

  --mv-z-header: 100;
  --mv-z-dropdown: 200;
  --mv-z-drawer: 300;
  --mv-z-modal: 400;
  --mv-z-toast: 500;
  --mv-z-coachmark: 600;
}

/* Nuevo Tema Seleccionable aprobado por el Dueño: Confianza + Energía */
[data-mv-tema="confianza-energia"],
.mv-sitio[data-mv-tema="confianza-energia"],
.mv-tema-confianza-energia {
  --mv-brand-header-bg: linear-gradient(135deg, #0C256F 0%, #1E3A8A 100%);
  --mv-brand-header-solid: #0C256F;
  --mv-brand-header-end: #1E3A8A;
  --mv-brand-header-fg: #FFFFFF;
  --mv-brand-header-muted: #DBEAFE;

  --mv-brand-primary: #2563EB;
  --mv-brand-primary-hover: #1D4ED8;
  --mv-brand-primary-soft: #EFF6FF;
  --mv-brand-primary-border: #DBEAFE;

  --mv-brand-energy: #EA580C;
  --mv-brand-energy-hover: #C2410C;
  --mv-brand-energy-soft: #FFF7ED;
  --mv-brand-energy-border: #FFEDD5;

  --mv-success: #059669;
  --mv-success-soft: #ECFDF5;
  --mv-success-border: #A7F3D0;

  --mv-warning: #D97706;
  --mv-warning-soft: #FFFBEB;
  --mv-danger: #DC2626;
  --mv-danger-soft: #FEF2F2;

  --mv-bg-page: #F1F5F9;
  --mv-bg-surface: #FFFFFF;
  --mv-bg-subtle: #F8FAFC;
  --mv-bg-elevated: #FFFFFF;
  --mv-bg-dark: #0F172A;

  --mv-border: #E2E8F0;
  --mv-border-subtle: #F1F5F9;
  --mv-border-strong: #CBD5E1;

  --mv-text-primary: #0F172A;
  --mv-text-secondary: #475569;
  --mv-text-muted: #64748B;
  --mv-text-inverse: #FFFFFF;

  /* Sincronización con tokens de mv.css */
  --mv-marino: #0C256F;
  --mv-azul: #2563EB;
  --mv-azul-ml: #2563EB;
  --mv-azul-ml-hover: #1D4ED8;
  --mv-verde-ml: #059669;
  --mv-verde-ml-fondo: #ECFDF5;
  --mv-fondo: #F1F5F9;
  --mv-fondo-ml: #F1F5F9;
  --mv-superficie: #FFFFFF;
  --mv-texto: #0F172A;
  --mv-texto-secundario: #475569;
  --mv-linea: #E2E8F0;
  --mv-accion: #EA580C;
  --mv-accion-texto: #FFFFFF;
  --mv-enlace: #2563EB;
  --mv-exito: #059669;
  --mv-exito-fondo: #ECFDF5;
}

/* --------------------------------------------------------------------------
   2. RESET ESCOPADO, CONTENEDORES Y ACCESIBILIDAD WCAG 2.1 AA
   -------------------------------------------------------------------------- */
.mv-app-shell,
.mv-page {
  background-color: var(--mv-bg-page);
  color: var(--mv-text-primary);
  font-family: var(--mv-font-sans);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.mv-app-shell *,
.mv-app-shell *::before,
.mv-app-shell *::after {
  box-sizing: border-box;
}

.mv-container {
  width: 100%;
  max-width: var(--mv-container-max);
  margin-inline: auto;
  padding-inline: var(--mv-space-4);
}

.mv-section {
  margin-block: var(--mv-space-6);
}

.mv-tabular-nums {
  font-variant-numeric: tabular-nums;
}

.mv-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip Links y Barra de Atajos de Teclado (WCAG AA) */
.mv-a11y-bar {
  position: relative;
  z-index: 999;
}

.mv-a11y-skip {
  position: absolute;
  top: -100px;
  left: var(--mv-space-4);
  background: var(--mv-bg-dark);
  color: var(--mv-text-inverse);
  padding: var(--mv-space-2) var(--mv-space-4);
  border-radius: var(--mv-radius-md);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--mv-shadow-overlay);
  transition: top 150ms ease;
}

.mv-a11y-skip:focus {
  top: var(--mv-space-2);
  outline: 2px solid var(--mv-brand-energy);
  outline-offset: 2px;
}

.mv-app-shell :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--mv-brand-primary);
  outline-offset: 2px;
  box-shadow: var(--mv-focus-ring);
}

/* Botones canónicos reutilizables */
.mv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mv-space-2);
  min-height: 42px;
  padding: 10px 20px;
  border-radius: var(--mv-radius-md);
  font-family: var(--mv-font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 100ms ease;
}

.mv-btn:active {
  transform: scale(0.99);
}

.mv-btn--primary {
  background-color: var(--mv-brand-primary);
  color: #FFFFFF;
}

.mv-btn--primary:hover {
  background-color: var(--mv-brand-primary-hover);
  color: #FFFFFF;
}

.mv-btn--secondary {
  background-color: var(--mv-brand-primary-soft);
  color: var(--mv-brand-primary);
  border-color: var(--mv-brand-primary-border);
}

.mv-btn--secondary:hover {
  background-color: #DBEAFE;
  color: var(--mv-brand-primary-hover);
}

.mv-btn--energy {
  background-color: var(--mv-brand-energy);
  color: #FFFFFF;
}

.mv-btn--energy:hover {
  background-color: var(--mv-brand-energy-hover);
  color: #FFFFFF;
}

.mv-btn--ghost {
  background-color: transparent;
  color: var(--mv-text-primary);
  border-color: var(--mv-border);
}

.mv-btn--ghost:hover {
  background-color: var(--mv-bg-subtle);
}

.mv-btn--sm {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 16px;
}

.mv-btn--lg {
  min-height: 48px;
  padding: 12px 24px;
  font-size: 16px;
}

.mv-btn--block {
  width: 100%;
}

/* Badges comerciales propios */
.mv-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--mv-radius-xs);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.2;
}

.mv-badge--oportunidad,
.mv-badge--deal {
  background-color: var(--mv-brand-primary);
  color: #FFFFFF;
}

.mv-badge--mas-vendido,
.mv-badge--energy {
  background-color: var(--mv-brand-energy);
  color: #FFFFFF;
}

.mv-badge--despacho-express,
.mv-badge--success {
  background-color: var(--mv-success-soft);
  color: var(--mv-success);
  border: 1px solid var(--mv-success-border);
}

.mv-badge--club-mv {
  background: linear-gradient(90deg, #0C256F 0%, #2563EB 55%, #EA580C 100%);
  color: #FFFFFF;
}

.mv-badge--vendedor-destacado {
  background-color: #FEF3C7;
  color: #92400E;
  border: 1px solid #FDE68A;
}

.mv-badge--pago-protegido {
  background-color: var(--mv-brand-primary-soft);
  color: var(--mv-brand-primary);
  border: 1px solid var(--mv-brand-primary-border);
}

/* --------------------------------------------------------------------------
   3. GRUPO A · BLOQUES DE LAYOUT Y SISTEMA (17 COMPONENTES)
   -------------------------------------------------------------------------- */

/* A1. SiteHeader (2 filas, Azul Noche Confianza, sticky en mobile) */
.mv-site-header {
  background: var(--mv-brand-header-bg);
  color: var(--mv-brand-header-fg);
  position: sticky;
  top: 0;
  z-index: var(--mv-z-header);
  box-shadow: 0 2px 10px rgba(12, 37, 111, 0.22);
}

@media (min-width: 1024px) {
  .mv-site-header--static-desktop {
    position: relative;
  }
}

.mv-site-header__inner {
  max-width: var(--mv-container-max);
  margin-inline: auto;
  padding: 10px var(--mv-space-4);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mv-site-header__row1 {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--mv-space-4);
}

.mv-site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #FFFFFF;
  text-decoration: none;
  font-family: var(--mv-font-display);
}

.mv-site-header__logo-mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #2563EB 0%, #EA580C 100%);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.mv-site-header__brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.mv-site-header__brand-name {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #FFFFFF;
}

.mv-site-header__brand-tag {
  font-size: 15px;
  font-weight: 600;
  color: var(--mv-brand-header-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mv-site-header__promo-slot {
  display: inline-flex;
  align-items: center;
  gap: var(--mv-space-2);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--mv-radius-pill);
  padding: 6px 14px;
  color: #FFFFFF;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 150ms ease;
}

.mv-site-header__promo-slot:hover {
  background: rgba(255, 255, 255, 0.2);
}

.mv-site-header__promo-pill {
  background: var(--mv-brand-energy);
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: var(--mv-radius-pill);
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
}

.mv-site-header__row2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mv-space-4);
  flex-wrap: wrap;
  font-size: 16px;
}

.mv-site-header__location-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--mv-radius-md);
  padding: 5px 10px;
  color: #FFFFFF;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.15;
}

.mv-site-header__location-btn:hover {
  background: rgba(255, 255, 255, 0.16);
}

.mv-site-header__location-sub {
  display: block;
  font-size: 15px;
  color: var(--mv-brand-header-muted);
}

.mv-site-header__location-main {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #FFFFFF;
}

.mv-site-header__nav {
  display: flex;
  align-items: center;
  gap: var(--mv-space-4);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.mv-site-header__nav-link {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 2px;
}

.mv-site-header__nav-link:hover {
  color: #FFFFFF;
}

.mv-site-header__user-bar {
  display: flex;
  align-items: center;
  gap: var(--mv-space-3);
  flex-wrap: wrap;
}

.mv-site-header__action-link {
  color: #FFFFFF;
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

.mv-site-header__counter {
  background: var(--mv-brand-energy);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding-inline: 5px;
  border-radius: var(--mv-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Conmutador rápido de Tema en la barra superior */
.mv-theme-switcher {
  display: inline-flex;
  align-items: center;
  background: rgba(15, 23, 42, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--mv-radius-pill);
  padding: 2px;
  gap: 2px;
}

.mv-theme-switcher__btn {
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--mv-radius-pill);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mv-theme-switcher__btn--active,
.mv-theme-switcher__btn[aria-pressed="true"] {
  background: #FFFFFF;
  color: #0C256F;
  font-weight: 700;
}

/* A2. SearchBox (Buscador ancho con selector de alcance y autocompletado) */
.mv-search-box {
  position: relative;
  width: 100%;
}

.mv-search-box__form {
  display: flex;
  align-items: stretch;
  width: 100%;
  background: #FFFFFF;
  border-radius: var(--mv-radius-md);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
  overflow: hidden;
  border: 2px solid transparent;
}

.mv-search-box__form:focus-within {
  border-color: var(--mv-brand-energy);
}

.mv-search-box__input {
  flex: 1 1 auto;
  border: 0;
  padding: 10px 14px;
  font-size: 15px;
  color: var(--mv-text-primary);
  background: transparent;
  min-width: 0;
}

.mv-search-box__input:focus {
  outline: none;
}

.mv-search-box__scope {
  border: 0;
  border-left: 1px solid var(--mv-border);
  background: var(--mv-bg-subtle);
  color: var(--mv-text-secondary);
  font-size: 15px;
  font-weight: 600;
  padding-inline: 10px;
  cursor: pointer;
}

.mv-search-box__submit {
  border: 0;
  border-left: 1px solid var(--mv-border);
  background: #FFFFFF;
  color: var(--mv-text-secondary);
  padding-inline: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mv-search-box__submit:hover {
  color: var(--mv-brand-primary);
  background: var(--mv-bg-subtle);
}

.mv-search-box__suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--mv-bg-surface);
  color: var(--mv-text-primary);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-md);
  box-shadow: var(--mv-shadow-overlay);
  z-index: var(--mv-z-dropdown);
  padding: var(--mv-space-2) 0;
  display: none;
}

.mv-search-box--open .mv-search-box__suggestions {
  display: block;
}

.mv-search-box__suggestion-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  color: var(--mv-text-primary);
  text-decoration: none;
  font-size: 16px;
}

.mv-search-box__suggestion-item:hover {
  background: var(--mv-brand-primary-soft);
}

/* A3. LocationPicker Modal (Elegí una dirección / CP argentino) */
.mv-location-picker {
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-4);
}

.mv-location-picker__addresses {
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-3);
}

.mv-location-picker__address-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mv-space-3);
  padding: var(--mv-space-3) var(--mv-space-4);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-md);
  background: var(--mv-bg-surface);
  cursor: pointer;
}

.mv-location-picker__address-card--active {
  border-color: var(--mv-brand-primary);
  background: var(--mv-brand-primary-soft);
}

.mv-location-picker__cp-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mv-space-3);
  padding-top: var(--mv-space-3);
  border-top: 1px solid var(--mv-border);
}

.mv-location-picker__cp-input {
  width: 150px;
  padding: 10px 12px;
  border: 1px solid var(--mv-border-strong);
  border-radius: var(--mv-radius-md);
  font-size: 15px;
  font-family: var(--mv-font-mono);
}

/* A4. MegaMenu de 2 paneles (Lista vertical oscura + grilla blanca de subcategorías) */
.mv-mega-menu {
  position: relative;
}

.mv-mega-menu__flyout {
  display: grid;
  grid-template-columns: 260px 1fr;
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  box-shadow: var(--mv-shadow-overlay);
  overflow: hidden;
  min-height: 420px;
  color: var(--mv-text-primary);
}

.mv-mega-menu__rail {
  background: #1E293B;
  color: #F8FAFC;
  list-style: none;
  margin: 0;
  padding: var(--mv-space-2) 0;
}

.mv-mega-menu__rail-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  color: #F8FAFC;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
}

.mv-mega-menu__rail-item:hover,
.mv-mega-menu__rail-item--active {
  background: var(--mv-brand-primary);
  color: #FFFFFF;
}

.mv-mega-menu__panel {
  padding: var(--mv-space-6);
  background: var(--mv-bg-surface);
}

.mv-mega-menu__panel-title {
  font-family: var(--mv-font-display);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 var(--mv-space-4);
  padding-bottom: var(--mv-space-3);
  border-bottom: 1px solid var(--mv-border);
  color: var(--mv-text-primary);
}

.mv-mega-menu__columns {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--mv-space-6);
}

.mv-mega-menu__group-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--mv-text-primary);
  margin: 0 0 var(--mv-space-2);
  display: block;
  text-decoration: none;
}

.mv-mega-menu__sublist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mv-mega-menu__sublink {
  color: var(--mv-text-secondary);
  text-decoration: none;
  font-size: 16px;
}

.mv-mega-menu__sublink:hover {
  color: var(--mv-brand-primary);
}

/* A5. UserMenu con selector Multi-Cuenta */
.mv-user-menu {
  background: var(--mv-bg-surface);
  color: var(--mv-text-primary);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  box-shadow: var(--mv-shadow-overlay);
  width: 320px;
  overflow: hidden;
}

.mv-user-menu__profile {
  display: flex;
  align-items: center;
  gap: var(--mv-space-3);
  padding: var(--mv-space-4);
  background: var(--mv-bg-subtle);
  border-bottom: 1px solid var(--mv-border);
}

.mv-user-menu__avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--mv-radius-pill);
  background: var(--mv-brand-primary);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
}

.mv-user-menu__accounts {
  padding: var(--mv-space-3) var(--mv-space-4);
  border-bottom: 1px solid var(--mv-border);
  background: #FFFFFF;
}

.mv-user-menu__accounts-title {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mv-text-muted);
  margin-bottom: var(--mv-space-2);
}

.mv-user-menu__account-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: var(--mv-radius-md);
  text-decoration: none;
  color: var(--mv-text-primary);
  font-size: 16px;
}

.mv-user-menu__account-item:hover {
  background: var(--mv-brand-primary-soft);
}

.mv-user-menu__account-item--active {
  background: var(--mv-brand-primary-soft);
  font-weight: 600;
  color: var(--mv-brand-primary);
}

.mv-user-menu__nav {
  list-style: none;
  margin: 0;
  padding: var(--mv-space-2) 0;
}

.mv-user-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 16px;
  color: var(--mv-text-primary);
  text-decoration: none;
  font-size: 16px;
}

.mv-user-menu__link:hover {
  background: var(--mv-bg-subtle);
  color: var(--mv-brand-primary);
}

/* A6. AccountSidebar (Colapsado 56px y Expandido 240px) */
.mv-account-layout {
  display: grid;
  grid-template-columns: auto 1fr;
  min-height: calc(100dvh - var(--mv-header-height-desktop));
  background: var(--mv-bg-page);
}

.mv-account-sidebar {
  background: var(--mv-bg-surface);
  border-right: 1px solid var(--mv-border);
  display: flex;
  flex-direction: column;
  transition: width 180ms ease;
  width: var(--mv-account-sidebar-width);
}

.mv-account-sidebar--collapsed {
  width: var(--mv-account-rail-width);
}

.mv-account-sidebar--expanded {
  width: var(--mv-account-sidebar-width);
}

.mv-account-sidebar__header {
  display: flex;
  align-items: center;
  gap: var(--mv-space-3);
  padding: 14px 16px;
  border-bottom: 1px solid var(--mv-border);
  font-weight: 700;
  color: var(--mv-text-primary);
}

.mv-account-sidebar__list {
  list-style: none;
  margin: 0;
  padding: var(--mv-space-2) 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mv-account-sidebar__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  color: var(--mv-text-secondary);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  border-left: 3px solid transparent;
  white-space: nowrap;
  overflow: hidden;
}

.mv-account-sidebar__item:hover {
  background: var(--mv-bg-subtle);
  color: var(--mv-text-primary);
}

.mv-account-sidebar__item--active {
  border-left-color: var(--mv-brand-primary);
  background: var(--mv-brand-primary-soft);
  color: var(--mv-brand-primary);
  font-weight: 600;
}

.mv-account-sidebar--collapsed .mv-account-sidebar__label,
.mv-account-sidebar--collapsed .mv-account-sidebar__badge {
  display: none;
}

/* A7. SiteFooter (Bloque SEO, Índice A-Z, Pestaña Más información ⌃, 7 Columnas) */
.mv-site-footer {
  background: var(--mv-bg-surface);
  border-top: 1px solid var(--mv-border);
  margin-top: auto;
  color: var(--mv-text-secondary);
  font-size: 16px;
}

.mv-site-footer__seo {
  max-width: var(--mv-container-max);
  margin-inline: auto;
  padding: var(--mv-space-6) var(--mv-space-4);
  border-bottom: 1px solid var(--mv-border);
}

.mv-site-footer__seo-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--mv-text-primary);
  margin: 0 0 var(--mv-space-3);
}

.mv-site-footer__keywords {
  line-height: 1.8;
  color: var(--mv-text-muted);
  margin-bottom: var(--mv-space-4);
}

.mv-site-footer__keyword-link {
  color: var(--mv-text-secondary);
  text-decoration: none;
}

.mv-site-footer__keyword-link:hover {
  color: var(--mv-brand-primary);
  text-decoration: underline;
}

.mv-site-footer__az {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.mv-site-footer__az-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--mv-radius-xs);
  border: 1px solid var(--mv-border);
  color: var(--mv-text-secondary);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
}

.mv-site-footer__az-link:hover {
  background: var(--mv-brand-primary);
  color: #FFFFFF;
  border-color: var(--mv-brand-primary);
}

.mv-site-footer__more-details {
  border-bottom: 1px solid var(--mv-border);
  background: var(--mv-bg-subtle);
}

.mv-site-footer__more-summary {
  list-style: none;
  display: flex;
  justify-content: center;
  padding: 10px;
  cursor: pointer;
}

.mv-site-footer__more-summary::-webkit-details-marker {
  display: none;
}

.mv-site-footer__more-pill {
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-md);
  padding: 6px 18px;
  font-size: 16px;
  font-weight: 600;
  color: var(--mv-text-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mv-site-footer__columns {
  max-width: var(--mv-container-max);
  margin-inline: auto;
  padding: var(--mv-space-6) var(--mv-space-4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--mv-space-6);
}

.mv-site-footer__col-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--mv-text-primary);
  margin: 0 0 var(--mv-space-3);
}

.mv-site-footer__col-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mv-site-footer__col-link {
  color: var(--mv-text-secondary);
  text-decoration: none;
}

.mv-site-footer__col-link:hover {
  color: var(--mv-brand-primary);
}

.mv-site-footer__legal-bar {
  max-width: var(--mv-container-max);
  margin-inline: auto;
  padding: var(--mv-space-5) var(--mv-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-2);
}

.mv-site-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mv-space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.mv-site-footer__legal-link {
  color: var(--mv-text-primary);
  text-decoration: none;
  font-size: 15px;
}

.mv-site-footer__legal-link:hover {
  color: var(--mv-brand-primary);
}

/* A8. LegalNotices (Botón de arrepentimiento + Ley 24.240 Defensa del Consumidor) */
.mv-legal-notices {
  max-width: var(--mv-container-max);
  margin-inline: auto;
  padding: var(--mv-space-4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--mv-space-4);
}

.mv-legal-notices__box {
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-md);
  padding: var(--mv-space-4) var(--mv-space-5);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.mv-legal-notices__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--mv-text-secondary);
  margin: 0;
}

.mv-legal-notices__link {
  color: var(--mv-brand-primary);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

.mv-legal-notices__link:hover {
  text-decoration: underline;
}

/* A9. CookieBanner y Modal CookiePreferences */
.mv-cookie-banner {
  position: fixed;
  bottom: var(--mv-space-4);
  left: var(--mv-space-4);
  right: var(--mv-space-4);
  max-width: 960px;
  margin-inline: auto;
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  box-shadow: var(--mv-shadow-overlay);
  padding: var(--mv-space-4) var(--mv-space-5);
  z-index: var(--mv-z-toast);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mv-space-4);
}

.mv-cookie-banner__text {
  flex: 1 1 420px;
  font-size: 16px;
  color: var(--mv-text-secondary);
}

.mv-cookie-banner__actions {
  display: flex;
  align-items: center;
  gap: var(--mv-space-2);
}

.mv-cookie-prefs__item {
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-md);
  padding: var(--mv-space-4);
  background: var(--mv-bg-surface);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mv-space-4);
}

/* A10. Breadcrumb */
.mv-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mv-space-2);
  font-size: 16px;
  color: var(--mv-text-secondary);
  padding-block: var(--mv-space-3);
}

.mv-breadcrumb__back {
  color: var(--mv-text-primary);
  font-weight: 600;
  text-decoration: none;
  padding-right: var(--mv-space-3);
  border-right: 1px solid var(--mv-border);
}

.mv-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mv-breadcrumb__link {
  color: var(--mv-brand-primary);
  text-decoration: none;
}

.mv-breadcrumb__link:hover {
  text-decoration: underline;
}

/* A11. EmptyState */
.mv-empty-state {
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  padding: var(--mv-space-10) var(--mv-space-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mv-space-3);
  max-width: 560px;
  margin-inline: auto;
}

.mv-empty-state__icon {
  width: 84px;
  height: 84px;
  border-radius: var(--mv-radius-pill);
  background: var(--mv-bg-subtle);
  color: var(--mv-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mv-empty-state__title {
  font-family: var(--mv-font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--mv-text-primary);
}

.mv-empty-state__text {
  font-size: 16px;
  color: var(--mv-text-secondary);
  max-width: 42ch;
}

/* A12. Skeleton (con respeto de prefers-reduced-motion) */
@keyframes mv-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.mv-skeleton {
  display: grid;
  gap: var(--mv-space-4);
}

.mv-skeleton__block {
  background: linear-gradient(90deg, #E2E8F0 25%, #F1F5F9 50%, #E2E8F0 75%);
  background-size: 200% 100%;
  animation: mv-shimmer 1.6s infinite linear;
  border-radius: var(--mv-radius-md);
}

.mv-skeleton__block--media { height: 180px; }
.mv-skeleton__block--title { height: 18px; width: 80%; }
.mv-skeleton__block--price { height: 26px; width: 50%; }
.mv-skeleton__block--line { height: 14px; width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .mv-skeleton__block {
    animation: none;
    background: #E2E8F0;
  }
}

/* A13. Snackbar («Deshacer») */
.mv-snackbar {
  background: #0F172A;
  color: #FFFFFF;
  border-radius: var(--mv-radius-md);
  padding: 12px 18px;
  box-shadow: var(--mv-shadow-overlay);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mv-space-6);
  font-size: 16px;
}

.mv-snackbar__action {
  background: transparent;
  border: 0;
  color: #60A5FA;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.mv-snackbar__action:hover {
  text-decoration: underline;
}

/* A14. Coachmark / Tour */
.mv-coachmark {
  background: var(--mv-brand-header-solid);
  color: #FFFFFF;
  border-radius: var(--mv-radius-lg);
  padding: var(--mv-space-4);
  box-shadow: var(--mv-shadow-overlay);
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-2);
}

.mv-coachmark__title {
  font-weight: 700;
  font-size: 15px;
}

.mv-coachmark__text {
  font-size: 16px;
  color: var(--mv-brand-header-muted);
}

/* A15 & A16. Drawer y Modal */
.mv-drawer,
.mv-modal {
  position: relative;
  z-index: var(--mv-z-modal);
}

.mv-drawer__panel,
.mv-modal__dialog {
  background: var(--mv-bg-surface);
  color: var(--mv-text-primary);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  box-shadow: var(--mv-shadow-overlay);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mv-modal--sm .mv-modal__dialog { max-width: 420px; }
.mv-modal--md .mv-modal__dialog { max-width: 600px; }
.mv-modal--lg .mv-modal__dialog { max-width: 860px; }

.mv-drawer__header,
.mv-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--mv-space-4) var(--mv-space-5);
  border-bottom: 1px solid var(--mv-border);
}

.mv-drawer__title,
.mv-modal__title {
  font-family: var(--mv-font-display);
  font-size: 18px;
  font-weight: 700;
}

.mv-drawer__body,
.mv-modal__body {
  padding: var(--mv-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-4);
}

.mv-drawer__footer,
.mv-modal__footer {
  padding: var(--mv-space-4) var(--mv-space-5);
  border-top: 1px solid var(--mv-border);
  background: var(--mv-bg-subtle);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--mv-space-3);
}

/* A17. Page404 */
.mv-page-404 {
  max-width: 720px;
  margin: var(--mv-space-10) auto;
  padding: var(--mv-space-8) var(--mv-space-6);
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-xl);
  box-shadow: var(--mv-shadow-card);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mv-space-4);
}

.mv-page-404__code {
  font-family: var(--mv-font-mono);
  font-size: 15px;
  color: var(--mv-text-muted);
  background: var(--mv-bg-subtle);
  padding: 4px 10px;
  border-radius: var(--mv-radius-pill);
}

/* --------------------------------------------------------------------------
   4. GRUPO B · BLOQUES DE MERCHANDISING, HOME Y LANDINGS (15 COMPONENTES)
   -------------------------------------------------------------------------- */

/* B1. HeroCarousel con degradado inferior hacia --mv-bg-page */
.mv-hero-carousel {
  position: relative;
  overflow: hidden;
  padding-bottom: 72px;
  background: linear-gradient(180deg, #0C256F 0%, #1E3A8A 62%, var(--mv-bg-page) 100%);
  color: #FFFFFF;
}

.mv-hero-carousel--energia {
  background: linear-gradient(180deg, #1E3A8A 0%, #EA580C 62%, var(--mv-bg-page) 100%);
}

.mv-hero-carousel--esmeralda {
  background: linear-gradient(180deg, #0C256F 0%, #059669 62%, var(--mv-bg-page) 100%);
}

.mv-hero-carousel__inner {
  max-width: var(--mv-container-max);
  margin-inline: auto;
  padding: var(--mv-space-8) var(--mv-space-4);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: var(--mv-space-6);
}

@media (max-width: 768px) {
  .mv-hero-carousel__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.mv-hero-carousel__eyebrow {
  display: inline-block;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(255, 255, 255, 0.16);
  padding: 4px 12px;
  border-radius: var(--mv-radius-pill);
  margin-bottom: var(--mv-space-3);
}

.mv-hero-carousel__title {
  font-family: var(--mv-font-display);
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 var(--mv-space-3);
  color: #FFFFFF;
}

.mv-hero-carousel__subtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 var(--mv-space-5);
}

.mv-hero-carousel__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mv-space-3);
  align-items: center;
}

.mv-hero-carousel__pill-primary {
  background: #FFFFFF;
  color: #0C256F;
  font-weight: 800;
  padding: 10px 20px;
  border-radius: var(--mv-radius-pill);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mv-hero-carousel__pill-discount {
  background: var(--mv-brand-energy);
  color: #FFFFFF;
  font-weight: 800;
  padding: 10px 20px;
  border-radius: var(--mv-radius-pill);
}

.mv-hero-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: var(--mv-space-4);
}

.mv-hero-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--mv-radius-pill);
  background: rgba(255, 255, 255, 0.45);
  border: 0;
  padding: 0;
}

.mv-hero-carousel__dot--active {
  width: 22px;
  background: #FFFFFF;
}

/* B2. QuickAccessCards (6 tarjetas blancas superpuestas -64px al pie del Hero) */
.mv-quick-access {
  max-width: var(--mv-container-max);
  margin-inline: auto;
  padding-inline: var(--mv-space-4);
  position: relative;
  z-index: 5;
}

.mv-quick-access--overlap {
  margin-top: -64px;
}

.mv-quick-access__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(165px, 1fr));
  gap: var(--mv-space-3);
  overflow-x: auto;
  padding-bottom: var(--mv-space-2);
}

.mv-quick-access__card {
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  box-shadow: var(--mv-shadow-card);
  padding: var(--mv-space-4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--mv-space-3);
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.mv-quick-access__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--mv-shadow-hover);
}

.mv-quick-access__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--mv-text-primary);
  margin: 0;
}

.mv-quick-access__icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: var(--mv-radius-lg);
  background: var(--mv-brand-primary-soft);
  color: var(--mv-brand-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
}

.mv-quick-access__text {
  font-size: 15px;
  color: var(--mv-text-secondary);
  text-align: center;
  margin: 0;
}

/* B3. PromoBannerGrid / PromoBannerPair */
.mv-promo-grid {
  display: grid;
  gap: var(--mv-space-4);
}

.mv-promo-grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.mv-promo-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.mv-promo-grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.mv-promo-banner {
  border-radius: var(--mv-radius-lg);
  overflow: hidden;
  padding: var(--mv-space-6);
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  gap: var(--mv-space-4);
  box-shadow: var(--mv-shadow-card);
  border: 1px solid var(--mv-border);
  background: var(--mv-bg-surface);
  color: var(--mv-text-primary);
}

.mv-promo-banner--dark {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  color: #FFFFFF;
  border-color: #1E293B;
}

.mv-promo-banner--brand {
  background: linear-gradient(135deg, #0C256F 0%, #2563EB 100%);
  color: #FFFFFF;
  border-color: #1E3A8A;
}

.mv-promo-banner__eyebrow {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}

.mv-promo-banner__title {
  font-family: var(--mv-font-display);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  margin: 6px 0 14px;
}

/* B4. LoyaltyBanner (Club MercadoVentas) */
.mv-loyalty-banner {
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  box-shadow: var(--mv-shadow-card);
  overflow: hidden;
}

.mv-loyalty-banner__header {
  background: linear-gradient(90deg, #0C256F 0%, #2563EB 60%, #EA580C 100%);
  color: #FFFFFF;
  padding: var(--mv-space-4) var(--mv-space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mv-space-4);
}

.mv-loyalty-banner__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--mv-space-3);
  font-family: var(--mv-font-display);
  font-size: 20px;
  font-weight: 800;
}

.mv-loyalty-banner__benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--mv-space-4);
  padding: var(--mv-space-5) var(--mv-space-6);
}

.mv-loyalty-banner__benefit {
  display: flex;
  align-items: center;
  gap: var(--mv-space-3);
  font-size: 16px;
  color: var(--mv-text-primary);
}

/* B5. VideoPromo (1/3 copy izquierda + 2/3 reproductor derecha) */
.mv-video-promo {
  background: #0F172A;
  color: #FFFFFF;
  border-radius: var(--mv-radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 2fr;
  box-shadow: var(--mv-shadow-card);
}

@media (max-width: 768px) {
  .mv-video-promo {
    grid-template-columns: 1fr;
  }
}

.mv-video-promo__copy {
  padding: var(--mv-space-8) var(--mv-space-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--mv-space-4);
}

.mv-video-promo__stage {
  background: linear-gradient(135deg, #1E293B 0%, #0C256F 100%);
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mv-space-6);
  position: relative;
}

/* B6. BenefitCarousel & B7. BrandBanner */
.mv-section-card {
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  box-shadow: var(--mv-shadow-card);
  padding: var(--mv-space-6);
}

.mv-section-card__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mv-space-4);
  margin-bottom: var(--mv-space-5);
}

.mv-section-card__title {
  font-family: var(--mv-font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--mv-text-primary);
  margin: 0;
}

.mv-benefit-carousel__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--mv-space-4);
}

.mv-benefit-card {
  border-radius: var(--mv-radius-lg);
  padding: var(--mv-space-5);
  color: #FFFFFF;
  background: linear-gradient(135deg, #0C256F 0%, #2563EB 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 170px;
  text-decoration: none;
}

.mv-benefit-card--energia {
  background: linear-gradient(135deg, #9A3412 0%, #EA580C 100%);
}

.mv-benefit-card--esmeralda {
  background: linear-gradient(135deg, #065F46 0%, #059669 100%);
}

.mv-brand-banner__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--mv-space-4);
}

.mv-brand-card {
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  padding: var(--mv-space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mv-space-4);
  text-decoration: none;
  color: var(--mv-text-primary);
  box-shadow: var(--mv-shadow-card);
}

/* B8. CategoryTileCarousel (Grilla 4x2 de categorías destacadas) */
.mv-category-tiles__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--mv-space-3);
}

@media (max-width: 900px) {
  .mv-category-tiles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.mv-category-tile {
  display: flex;
  align-items: center;
  gap: var(--mv-space-3);
  padding: var(--mv-space-4);
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-md);
  text-decoration: none;
  color: var(--mv-text-primary);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.mv-category-tile:hover {
  border-color: var(--mv-brand-primary);
  box-shadow: var(--mv-shadow-card);
  color: var(--mv-brand-primary);
}

.mv-category-tile__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--mv-radius-md);
  background: var(--mv-bg-subtle);
  color: var(--mv-brand-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mv-category-tile__name {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

/* B9. CategoryHero (Landing editorial de categoría) */
.mv-category-hero {
  background: linear-gradient(135deg, #0C256F 0%, #2563EB 100%);
  color: #FFFFFF;
  border-radius: var(--mv-radius-xl);
  padding: var(--mv-space-8) var(--mv-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-6);
}

.mv-category-hero__subcats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--mv-space-3);
}

.mv-category-hero__subcat-pill {
  background: var(--mv-bg-surface);
  color: var(--mv-text-primary);
  border-radius: var(--mv-radius-lg);
  padding: var(--mv-space-3);
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  box-shadow: var(--mv-shadow-card);
}

/* B10 & B11. ProductCarousel y ProductGrid */
.mv-product-carousel__track {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--mv-space-4);
}

.mv-product-grid {
  display: grid;
  gap: var(--mv-space-4);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.mv-product-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mv-product-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mv-product-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 960px) {
  .mv-product-grid--3,
  .mv-product-grid--4,
  .mv-product-grid--6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* B12. TrustBadges (Pago Protegido MV + Despacho Express) */
.mv-trust-badges {
  background: var(--mv-bg-surface);
  border-top: 1px solid var(--mv-border);
  border-bottom: 1px solid var(--mv-border);
  padding-block: var(--mv-space-8);
}

.mv-trust-badges__grid {
  max-width: var(--mv-container-max);
  margin-inline: auto;
  padding-inline: var(--mv-space-4);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mv-space-6);
}

@media (max-width: 768px) {
  .mv-trust-badges__grid { grid-template-columns: 1fr; }
}

.mv-trust-badges__item {
  text-align: center;
  padding-inline: var(--mv-space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mv-space-2);
}

.mv-trust-badges__item + .mv-trust-badges__item {
  border-left: 1px solid var(--mv-border);
}

@media (max-width: 768px) {
  .mv-trust-badges__item + .mv-trust-badges__item {
    border-left: 0;
    border-top: 1px solid var(--mv-border);
    padding-top: var(--mv-space-4);
  }
}

.mv-trust-badges__title {
  font-family: var(--mv-font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--mv-text-primary);
  margin: 0;
}

.mv-trust-badges__text {
  font-size: 16px;
  color: var(--mv-text-secondary);
  margin: 0;
  max-width: 34ch;
}

/* B13 & B14. OfferTabs y CountdownBadge (Oportunidad del día) */
.mv-offer-tabs {
  background: var(--mv-bg-surface);
  border-bottom: 1px solid var(--mv-border);
  padding: var(--mv-space-5) var(--mv-space-4) 0;
}

.mv-offer-tabs__inner {
  max-width: var(--mv-container-max);
  margin-inline: auto;
}

.mv-offer-tabs__list {
  display: flex;
  align-items: stretch;
  gap: var(--mv-space-6);
  overflow-x: auto;
  list-style: none;
  margin: var(--mv-space-4) 0 0;
  padding: 0;
}

.mv-offer-tabs__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: var(--mv-space-2) var(--mv-space-3) var(--mv-space-3);
  color: var(--mv-text-secondary);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}

.mv-offer-tabs__tab--active {
  color: var(--mv-brand-primary);
  border-bottom-color: var(--mv-brand-primary);
}

.mv-countdown-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--mv-space-2);
  background: var(--mv-brand-energy-soft);
  border: 1px solid var(--mv-brand-energy-border);
  color: var(--mv-brand-energy);
  padding: 6px 12px;
  border-radius: var(--mv-radius-md);
  font-size: 15px;
  font-weight: 700;
}

.mv-countdown-badge__timer {
  font-family: var(--mv-font-mono);
  font-variant-numeric: tabular-nums;
  background: var(--mv-brand-energy);
  color: #FFFFFF;
  padding: 2px 6px;
  border-radius: var(--mv-radius-xs);
}

/* B15. SubStoreHeader (Súper MercadoVentas / Mayorista) */
.mv-substore-header {
  background: linear-gradient(135deg, #065F46 0%, #059669 100%);
  color: #FFFFFF;
  border-radius: var(--mv-radius-lg);
  padding: var(--mv-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-4);
}

.mv-substore-header__gondolas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mv-space-2);
}

.mv-substore-header__gondola-pill {
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  padding: 6px 14px;
  border-radius: var(--mv-radius-pill);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   5. GRUPO C · SRP Y PRODUCT CARD (12 ELEMENTOS ANATÓMICOS + LEY 27.743)
   -------------------------------------------------------------------------- */
.mv-srp-layout {
  max-width: var(--mv-container-max);
  margin-inline: auto;
  padding: var(--mv-space-4);
  display: grid;
  grid-template-columns: var(--mv-sidebar-filters-width) 1fr;
  gap: var(--mv-space-6);
  align-items: start;
}

@media (max-width: 960px) {
  .mv-srp-layout { grid-template-columns: 1fr; }
}

.mv-srp-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-4);
}

.mv-quick-toggle-card {
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-md);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mv-space-3);
}

.mv-facet-filter {
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-md);
  padding: var(--mv-space-4);
}

.mv-facet-filter__title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 var(--mv-space-2);
}

/* ProductCard: 12 Elementos Anatómicos */
.mv-product-card,
.mv-card {
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  box-shadow: var(--mv-shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.mv-product-card:hover,
.mv-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--mv-shadow-hover);
}

.mv-product-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--mv-bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mv-space-4);
  border-bottom: 1px solid var(--mv-border-subtle);
}

.mv-product-card__fav {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: var(--mv-radius-pill);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--mv-border);
  color: var(--mv-brand-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mv-product-card__body {
  padding: var(--mv-space-4);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.mv-product-card__store {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--mv-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mv-product-card__title {
  font-size: 16px;
  font-weight: 500;
  color: var(--mv-text-primary);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
}

.mv-product-card__rating {
  font-size: 15px;
  color: var(--mv-text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mv-product-card__old-price {
  font-size: 15px;
  color: var(--mv-text-muted);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

.mv-product-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.mv-product-card__price {
  font-family: var(--mv-font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--mv-text-primary);
  font-variant-numeric: tabular-nums;
}

.mv-product-card__discount {
  font-size: 16px;
  font-weight: 700;
  color: var(--mv-success);
}

.mv-product-card__tax-free {
  font-size: 15px;
  color: var(--mv-text-muted);
  font-variant-numeric: tabular-nums;
}

.mv-product-card__installments {
  font-size: 16px;
  font-weight: 600;
  color: var(--mv-success);
}

.mv-product-card__shipping {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--mv-success);
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   6. GRUPO D · FICHA DE PRODUCTO PDP DE 3 COLUMNAS (44% / 31% / 25%)
   -------------------------------------------------------------------------- */
.mv-pdp-layout {
  max-width: var(--mv-container-max);
  margin-inline: auto;
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  box-shadow: var(--mv-shadow-card);
  padding: var(--mv-space-6);
  display: grid;
  grid-template-columns: 44fr 31fr 25fr;
  gap: var(--mv-space-6);
  align-items: start;
}

@media (max-width: 1024px) {
  .mv-pdp-layout { grid-template-columns: 1fr; }
}

.mv-pdp-gallery {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--mv-space-3);
}

.mv-pdp-gallery__thumbs {
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-2);
}

.mv-pdp-gallery__thumb {
  width: 56px;
  height: 56px;
  border: 2px solid var(--mv-border);
  border-radius: var(--mv-radius-sm);
  padding: 2px;
  background: #FFFFFF;
  cursor: pointer;
}

.mv-pdp-gallery__thumb--active {
  border-color: var(--mv-brand-primary);
}

.mv-pdp-gallery__stage {
  aspect-ratio: 1 / 1;
  background: var(--mv-bg-subtle);
  border-radius: var(--mv-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mv-space-4);
}

.mv-price-block__current {
  font-family: var(--mv-font-display);
  font-size: 36px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--mv-text-primary);
}

.mv-price-block__tax-free {
  font-size: 15px;
  color: var(--mv-text-muted);
  margin-top: 4px;
}

.mv-quantity-tiers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mv-space-2);
  margin-block: var(--mv-space-3);
}

.mv-quantity-tier-pill {
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-md);
  padding: 8px 12px;
  background: var(--mv-bg-surface);
  cursor: pointer;
}

.mv-quantity-tier-pill--best {
  border-color: var(--mv-brand-primary);
  background: var(--mv-brand-primary-soft);
}

.mv-buy-box {
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  padding: var(--mv-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-4);
  position: sticky;
  top: 24px;
  background: var(--mv-bg-surface);
}

/* Termómetro de 5 segmentos de Vendedor Destacado MV */
.mv-thermometer {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  align-items: center;
  margin-block: var(--mv-space-2);
}

.mv-thermometer__seg {
  height: 8px;
  border-radius: 2px;
  opacity: 0.28;
}

.mv-thermometer__seg--active {
  height: 12px;
  opacity: 1;
}

.mv-thermometer__seg--1 { background: var(--mv-reputation-1); }
.mv-thermometer__seg--2 { background: var(--mv-reputation-2); }
.mv-thermometer__seg--3 { background: var(--mv-reputation-3); }
.mv-thermometer__seg--4 { background: var(--mv-reputation-4); }
.mv-thermometer__seg--5 { background: var(--mv-reputation-5); }

/* AttributesTable cebrada (#F8FAFC / #FFFFFF) */
.mv-attributes-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-md);
  overflow: hidden;
}

.mv-attributes-table tr:nth-child(odd) {
  background: #F8FAFC;
}

.mv-attributes-table tr:nth-child(even) {
  background: #FFFFFF;
}

.mv-attributes-table th,
.mv-attributes-table td {
  padding: 12px 16px;
  text-align: left;
  font-size: 16px;
  border-bottom: 1px solid var(--mv-border);
}

/* QnA con IA y Reviews con Resumen IA */
.mv-ai-callout {
  background: var(--mv-brand-primary-soft);
  border: 1px solid var(--mv-brand-primary-border);
  border-radius: var(--mv-radius-lg);
  padding: var(--mv-space-4);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* --------------------------------------------------------------------------
   7. GRUPO E · CARRITO MULTI-VENDEDOR ($ 33.000 ENVÍO GRATIS) Y CHECKOUT 1-PÁGINA
   -------------------------------------------------------------------------- */
.mv-cart-layout,
.mv-checkout-layout {
  max-width: var(--mv-container-max);
  margin-inline: auto;
  padding: var(--mv-space-6) var(--mv-space-4);
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--mv-space-6);
  align-items: start;
}

@media (max-width: 960px) {
  .mv-cart-layout,
  .mv-checkout-layout { grid-template-columns: 1fr; }
}

.mv-cart-group {
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  box-shadow: var(--mv-shadow-card);
  overflow: hidden;
  margin-bottom: var(--mv-space-4);
}

.mv-free-shipping-progress {
  padding: var(--mv-space-3) var(--mv-space-5);
  background: var(--mv-success-soft);
  border-top: 1px solid var(--mv-success-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mv-progress {
  width: 100%;
  height: 8px;
  border-radius: var(--mv-radius-pill);
  overflow: hidden;
  appearance: none;
  border: 0;
  background: #E2E8F0;
}

.mv-progress::-webkit-progress-bar {
  background: #E2E8F0;
  border-radius: var(--mv-radius-pill);
}

.mv-progress::-webkit-progress-value {
  background: var(--mv-success);
  border-radius: var(--mv-radius-pill);
}

.mv-progress::-moz-progress-bar {
  background: var(--mv-success);
  border-radius: var(--mv-radius-pill);
}

.mv-order-summary {
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  box-shadow: var(--mv-shadow-card);
  padding: var(--mv-space-5);
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-3);
}

/* --------------------------------------------------------------------------
   8. GRUPO F · CUPONES (TICKET TROQUELADO), CUENTA Y PANEL VENDEDOR / WIZARD
   -------------------------------------------------------------------------- */
.mv-coupons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: var(--mv-space-4);
}

.mv-coupon-card {
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  box-shadow: var(--mv-shadow-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.mv-coupon-card__top {
  padding: var(--mv-space-5);
  display: flex;
  gap: var(--mv-space-4);
  align-items: flex-start;
}

.mv-coupon-card__bottom {
  padding: var(--mv-space-3) var(--mv-space-5);
  border-top: 2px dashed var(--mv-border);
  background: var(--mv-bg-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mv-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--mv-space-3);
}

.mv-kpi-card {
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  padding: var(--mv-space-4);
  box-shadow: var(--mv-shadow-xs);
}

.mv-kpi-card__value {
  font-family: var(--mv-font-display);
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mv-form-section-card {
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  padding: var(--mv-space-5);
  box-shadow: var(--mv-shadow-card);
}

.mv-status-badge--completo {
  background: var(--mv-success-soft);
  color: var(--mv-success);
  padding: 3px 10px;
  border-radius: var(--mv-radius-pill);
  font-size: 15px;
  font-weight: 700;
}

.mv-status-badge--pendiente {
  background: var(--mv-warning-soft);
  color: var(--mv-warning);
  padding: 3px 10px;
  border-radius: var(--mv-radius-pill);
  font-size: 15px;
  font-weight: 700;
}

.mv-chip-sentence {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  background: var(--mv-bg-surface);
  border: 2px solid var(--mv-brand-primary);
  border-radius: var(--mv-radius-md);
}

.mv-chip-token {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--mv-radius-pill);
  background: var(--mv-brand-primary-soft);
  color: var(--mv-brand-primary);
  font-size: 16px;
  font-weight: 600;
}

/* Clases utilitarias de ancho porcentual para barras sin style inline */
.mv-w-0 { width: 0%; }
.mv-w-10 { width: 10%; }
.mv-w-20 { width: 20%; }
.mv-w-25 { width: 25%; }
.mv-w-30 { width: 30%; }
.mv-w-40 { width: 40%; }
.mv-w-50 { width: 50%; }
.mv-w-60 { width: 60%; }
.mv-w-70 { width: 70%; }
.mv-w-75 { width: 75%; }
.mv-w-80 { width: 80%; }
.mv-w-90 { width: 90%; }
.mv-w-100 { width: 100%; }

/* Dimensionamiento seguro para íconos SVG de línea 24x24 sin atributo width explícito */
.mv-sitio svg:not([width]),
.mv-app-shell svg:not([width]) {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  vertical-align: middle;
}
.mv-quick-access__icon svg:not([width]),
.mv-cat-grid__icon svg:not([width]),
.mv-empty-state__icon svg:not([width]) {
  width: 24px;
  height: 24px;
}

/* ============================================================================
   COMPLEMENTO BEM EXACT-MATCH F2, F4, F5, F6 y F7 (SRP, PDP 3-Col, Carrito,
   Checkout, Cupones, Mi Cuenta Multicuenta, Central Vendedor y Wizard IA 0,5%)
   ============================================================================ */

/* Controles base, botones, inputs y píldoras dentro de F2–F7 */
.mv-sitio button,
.mv-app-shell button {
  font-family: inherit;
}

.mv-input,
.mv-select,
.mv-qna__search-input,
.mv-qna__ask-input,
.mv-price-filter__input,
.mv-chip-sentence__raw-input,
.mv-editable-chip__input {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--mv-border-strong, #CBD5E1);
  border-radius: var(--mv-radius-md, 8px);
  background: var(--mv-bg-surface, #FFFFFF);
  color: var(--mv-fg-primary, #0F172A);
  font-size: 16px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.mv-input--lg,
.mv-chip-sentence__raw-input {
  height: 46px;
  font-size: 15px;
  width: 100%;
}
.mv-input--sm,
.mv-select--sm {
  height: 34px;
  font-size: 16px;
}
.mv-btn--full {
  width: 100%;
  justify-content: center;
}
.mv-btn--xs {
  min-height: 28px;
  padding: 4px 10px;
  font-size: 15px;
}
.mv-btn--ghost-primary {
  background: var(--mv-primary-soft, #EFF6FF);
  color: var(--mv-primary, #1D4ED8);
  border: 1px solid var(--mv-primary-border, #BFDBFE);
}
.mv-btn--ghost-danger {
  background: var(--mv-danger-soft, #FEF2F2);
  color: var(--mv-danger, #DC2626);
  border: 1px solid #FECACA;
}
.mv-pill-btn,
.mv-step-pill,
.mv-chip-suggestion-btn,
.mv-qna__chip,
.mv-coupon-filters__tab,
.mv-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--mv-border-subtle, #E2E8F0);
  background: var(--mv-bg-surface, #FFFFFF);
  color: var(--mv-fg-secondary, #334155);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 140ms ease;
}
.mv-pill-btn:hover,
.mv-step-pill:hover,
.mv-chip-suggestion-btn:hover,
.mv-qna__chip:hover {
  border-color: var(--mv-primary, #1D4ED8);
  color: var(--mv-primary, #1D4ED8);
  background: var(--mv-primary-soft, #EFF6FF);
}
.mv-link-btn {
  background: none;
  border: none;
  color: var(--mv-primary, #1D4ED8);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 6px;
}
.mv-link-btn--danger {
  color: var(--mv-danger, #DC2626);
}

/* F2 · SRP Listado Facetado */
.mv-srp-page,
.mv-pdp-page,
.mv-cart-page,
.mv-coupons-section,
.mv-account-shell,
.mv-seller-dashboard,
.mv-publish-wizard,
.mv-checkout-onepage {
  max-width: var(--mv-container-max, 1200px);
  margin: 0 auto;
  padding: 20px 16px 48px;
}
.mv-srp-layout {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.mv-srp-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mv-results-header,
.mv-quick-toggles,
.mv-facet-filter,
.mv-price-filter,
.mv-sort-bar,
.mv-sponsored-brand {
  background: var(--mv-bg-surface, #FFFFFF);
  border: 1px solid var(--mv-border-subtle, #E2E8F0);
  border-radius: var(--mv-radius-lg, 12px);
  padding: 14px 16px;
  box-shadow: var(--mv-shadow-xs);
}
.mv-results-header__title {
  font-size: 20px;
  font-weight: 800;
  margin: 4px 0;
  color: var(--mv-fg-primary, #0F172A);
}
.mv-results-header__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.mv-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--mv-primary-soft, #EFF6FF);
  color: var(--mv-primary, #1D4ED8);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
}
.mv-quick-toggle-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--mv-border-subtle, #E2E8F0);
}
.mv-quick-toggle-card:last-child {
  border-bottom: none;
}
.mv-quick-toggle-card__label {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--mv-fg-primary, #0F172A);
}
.mv-quick-toggle-card__sub {
  display: block;
  font-size: 15px;
  color: var(--mv-fg-muted, #64748B);
}
.mv-facet-filter__title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--mv-fg-primary, #0F172A);
}
.mv-facet-filter__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mv-facet-filter__link {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  color: var(--mv-fg-secondary, #334155);
  text-decoration: none;
}
.mv-sort-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.mv-sponsored-brand {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mv-sponsored-brand__products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.mv-sponsored-brand__mini-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--mv-border-subtle, #E2E8F0);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
}
.mv-product-grid,
.mv-srp-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.mv-product-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.mv-product-card__media {
  position: relative;
  height: 190px;
  background: var(--mv-bg-subtle, #F8FAFC);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-bottom: 1px solid var(--mv-border-subtle, #E2E8F0);
}
.mv-product-card__img {
  max-height: 160px;
  max-width: 100%;
  object-fit: contain;
}
.mv-product-card__fav {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--mv-border-subtle, #E2E8F0);
  background: rgba(255, 255, 255, 0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mv-product-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
}
.mv-product-card__discount {
  font-size: 16px;
  font-weight: 700;
  color: var(--mv-success, #059669);
}

/* F2 · PDP 3 Columnas */
.mv-store-cover {
  background: linear-gradient(135deg, #0F172A 0%, #1E3A8A 100%);
  color: #FFFFFF;
  border-radius: var(--mv-radius-lg, 12px);
  padding: 16px 20px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.mv-store-cover__floating-card {
  display: flex;
  align-items: center;
  gap: 14px;
}
.mv-store-cover__logo {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mv-store-cover__visit-link {
  color: #93C5FD;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}
.mv-store-cover__highlights {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 18px;
  font-size: 16px;
  color: #E2E8F0;
}
.mv-pdp-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 14px;
  font-size: 16px;
}
.mv-pdp-topbar__left,
.mv-pdp-topbar__crumbs,
.mv-pdp-topbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mv-pdp-3col-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 340px;
  gap: 24px;
  background: var(--mv-bg-surface, #FFFFFF);
  border: 1px solid var(--mv-border-subtle, #E2E8F0);
  border-radius: var(--mv-radius-xl, 16px);
  padding: 24px;
  box-shadow: var(--mv-shadow-sm);
  align-items: start;
}
.mv-pdp-gallery {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
}
.mv-pdp-gallery__thumbs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mv-pdp-gallery__thumb {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  border: 1.5px solid var(--mv-border-subtle, #E2E8F0);
  background: var(--mv-bg-subtle, #F8FAFC);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mv-pdp-gallery__viewport {
  min-height: 380px;
  background: var(--mv-bg-subtle, #F8FAFC);
  border: 1px solid var(--mv-border-subtle, #E2E8F0);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
}
.mv-pdp-headline__meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  color: var(--mv-fg-muted, #64748B);
}
.mv-pdp-headline__title {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.28;
  margin: 8px 0 10px;
  color: var(--mv-fg-primary, #0F172A);
}
.mv-pdp-headline__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  margin-bottom: 12px;
}
.mv-pdp-headline__rating-stars {
  color: #F59E0B;
}
.mv-price-block {
  padding: 14px 0;
  border-top: 1px solid var(--mv-border-subtle, #E2E8F0);
  border-bottom: 1px solid var(--mv-border-subtle, #E2E8F0);
  margin-bottom: 16px;
}
.mv-price-block__old-price {
  font-size: 16px;
  color: var(--mv-fg-muted, #64748B);
  text-decoration: line-through;
}
.mv-price-block__main-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 4px 0;
}
.mv-price-block__price {
  font-size: 32px;
  font-weight: 800;
  color: var(--mv-fg-primary, #0F172A);
}
.mv-price-block__discount {
  font-size: 15px;
  font-weight: 700;
  color: var(--mv-success, #059669);
}
.mv-price-block__installments {
  font-size: 16px;
  font-weight: 600;
  color: var(--mv-success, #059669);
}
.mv-price-block__tax-free {
  font-size: 15px;
  color: var(--mv-fg-muted, #64748B);
  margin-top: 4px;
}
.mv-qty-tiers__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 16px;
}
.mv-qty-tier-pill {
  padding: 10px;
  border: 1.5px solid var(--mv-border-subtle, #E2E8F0);
  border-radius: 10px;
  background: var(--mv-bg-surface, #FFFFFF);
  text-align: left;
  cursor: pointer;
}
.mv-variant-picker__thumbs,
.mv-variant-picker__sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 14px;
}
.mv-variant-thumb,
.mv-variant-size-btn {
  padding: 8px 12px;
  border: 1.5px solid var(--mv-border-subtle, #E2E8F0);
  border-radius: 8px;
  background: var(--mv-bg-surface, #FFFFFF);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.mv-key-facts__list {
  padding-left: 18px;
  font-size: 16px;
  color: var(--mv-fg-secondary, #334155);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mv-buy-box,
.mv-seller-card,
.mv-payment-methods {
  border: 1px solid var(--mv-border-subtle, #E2E8F0);
  border-radius: 12px;
  padding: 18px;
  background: var(--mv-bg-surface, #FFFFFF);
  margin-bottom: 14px;
}
.mv-buy-box__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
}
.mv-buy-box__trust-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15px;
  color: var(--mv-fg-secondary, #334155);
}
.mv-pdp-lower-sections {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.mv-pdp-card,
.mv-qna-section,
.mv-reviews-section {
  background: var(--mv-bg-surface, #FFFFFF);
  border: 1px solid var(--mv-border-subtle, #E2E8F0);
  border-radius: 14px;
  padding: 22px;
}
.mv-attributes-highlights {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.mv-attributes-tables-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.mv-attributes-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.mv-attributes-table__th,
.mv-attributes-table__td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--mv-border-subtle, #E2E8F0);
  text-align: left;
}
.mv-attributes-table__row--zebra {
  background: var(--mv-bg-subtle, #F8FAFC);
}
.mv-reviews__layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 24px;
}

/* F4 · Carrito y Checkout */
.mv-cart-layout,
.mv-checkout-onepage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
}
.mv-cart-toolbar,
.mv-cart-group,
.mv-order-summary,
.mv-checkout-accordion {
  background: var(--mv-bg-surface, #FFFFFF);
  border: 1px solid var(--mv-border-subtle, #E2E8F0);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: var(--mv-shadow-xs);
}
.mv-cart-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mv-cart-group__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--mv-border-subtle, #E2E8F0);
}
.mv-cart-item {
  display: grid;
  grid-template-columns: 24px 80px minmax(0, 1fr) 130px 130px;
  gap: 14px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--mv-border-subtle, #E2E8F0);
}
.mv-cart-item__thumb {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 8px;
  background: var(--mv-bg-subtle, #F8FAFC);
  border: 1px solid var(--mv-border-subtle, #E2E8F0);
  font-size: 15px;
  overflow: hidden;
}
.mv-cart-item__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--mv-fg-primary, #0F172A);
  text-decoration: none;
  display: block;
}
.mv-cart-item__actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.mv-qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--mv-border-strong, #CBD5E1);
  border-radius: 8px;
  overflow: hidden;
}
.mv-qty-stepper__btn {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--mv-bg-subtle, #F8FAFC);
  font-weight: 700;
  cursor: pointer;
}
.mv-qty-stepper__input {
  width: 40px;
  height: 32px;
  border: none;
  text-align: center;
  font-weight: 700;
}
.mv-order-summary__title {
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 12px;
}
.mv-order-summary__line,
.mv-order-summary__total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 16px;
}
.mv-order-summary__total-amount {
  font-size: 24px;
  font-weight: 800;
  color: var(--mv-fg-primary, #0F172A);
}
.mv-coupon-box__toggle,
.mv-coupon-pill {
  width: 100%;
  padding: 10px 12px;
  border: 1px dashed var(--mv-primary-border, #93C5FD);
  border-radius: 8px;
  background: var(--mv-primary-soft, #EFF6FF);
  color: var(--mv-primary, #1D4ED8);
  font-size: 16px;
  font-weight: 600;
  margin-top: 8px;
  cursor: pointer;
  text-align: left;
}
.mv-coupon-box__input-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* F5 · Cupones Hub */
.mv-coupon-filters {
  background: var(--mv-bg-surface, #FFFFFF);
  border: 1px solid var(--mv-border-subtle, #E2E8F0);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 18px;
}
.mv-coupon-filters__top-row,
.mv-coupon-filters__tabs,
.mv-coupon-filters__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.mv-coupons-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.mv-coupon-ticket {
  display: grid;
  grid-template-columns: 110px 12px minmax(0, 1fr);
  background: var(--mv-bg-surface, #FFFFFF);
  border: 1px solid var(--mv-border-subtle, #E2E8F0);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--mv-shadow-xs);
}
.mv-coupon-ticket__badge-col {
  background: var(--mv-primary-soft, #EFF6FF);
  color: var(--mv-primary, #1D4ED8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-weight: 800;
}
.mv-coupon-ticket__main {
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* F6 · Mi Cuenta Multicuenta */
.mv-account-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 24px;
}
.mv-account-sidebar,
.mv-account-section,
.mv-order-card,
.mv-profile-card {
  background: var(--mv-bg-surface, #FFFFFF);
  border: 1px solid var(--mv-border-subtle, #E2E8F0);
  border-radius: 12px;
  padding: 18px;
}
.mv-account-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}
.mv-account-sidebar__link {
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--mv-fg-secondary, #334155);
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
}
.mv-profile-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

/* F7 · Central Vendedor y Wizard IA 0,5% */
.mv-kpi-strip,
.mv-dashboard-widget,
.mv-mini-line-chart,
.mv-listings-manager,
.mv-ops-console,
.mv-form-section-card,
.mv-chip-sentence,
.mv-catalog-match-list,
.mv-category-predicted-card,
.mv-variant-matrix-block,
.mv-commission-calculator {
  background: var(--mv-bg-surface, #FFFFFF);
  border: 1px solid var(--mv-border-subtle, #E2E8F0);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 18px;
  box-shadow: var(--mv-shadow-xs);
}
.mv-kpi-strip__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.mv-kpi-card {
  padding: 14px;
  border: 1px solid var(--mv-border-subtle, #E2E8F0);
  border-radius: 10px;
  background: var(--mv-bg-subtle, #F8FAFC);
}
.mv-kpi-card__value {
  font-size: 22px;
  font-weight: 800;
  color: var(--mv-fg-primary, #0F172A);
}
.mv-seller-dashboard__middle {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 18px;
}
.mv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.mv-table th,
.mv-table td {
  padding: 12px;
  border-bottom: 1px solid var(--mv-border-subtle, #E2E8F0);
  text-align: left;
}
.mv-publish-wizard__steps-indicator,
.mv-mode-switcher,
.mv-chip-sentence__alt-actions,
.mv-editable-chip__suggestions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.mv-chip-sentence__bar {
  display: flex;
  gap: 10px;
  margin: 10px 0 14px;
}
.mv-chip-sentence__sentence {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
}
.mv-editable-chip {
  padding: 12px;
  border: 1px solid var(--mv-border-subtle, #E2E8F0);
  border-radius: 10px;
  background: var(--mv-bg-subtle, #F8FAFC);
}
.mv-editable-chip__role {
  display: block;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--mv-primary, #1D4ED8);
  margin-bottom: 4px;
}
.mv-catalog-match-list__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 14px 0;
}
.mv-catalog-match-card {
  border: 1px solid var(--mv-border-subtle, #E2E8F0);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mv-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.mv-commission-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--mv-border-subtle, #E2E8F0);
}
.mv-commission-row--net {
  font-size: 18px;
  font-weight: 800;
  color: var(--mv-success, #059669);
}

/* ==========================================================================
   SISTEMA DE TEMA P02 COBALTO + ORO, SPRITE DE ÍCONOS (.mv-icon) Y BLOQUES P1-P3
   ========================================================================== */
[data-mg-tema="p02-cobalto-oro"] {
  --mgui-color-1: #1647D8;
  --mgui-color-2: #E5B65A;
  --mv-primary: #1647D8;
  --mv-brand-deep: #0B1F44;
  --mv-action: #3F6CDA;
  --mv-action-hover: #315CC9;
  --mv-action-soft: #D7DFF6;
  --mv-accent-gold: #E5B65A;
  --mv-bg-page: #D9DFEA;
  --mv-bg-surface: #F4F6FA;
  --mv-fg-primary: #172236;
  --mv-fg-muted: #46546A;
  --mv-border-subtle: #BFC5CF;
  --mv-focus: #087885;
  --mv-success: #00875C;
  --mv-danger: #DF3236;
}

.mv-tabular-nums {
  font-variant-numeric: tabular-nums;
}

.mv-icon {
  display: inline-block;
  vertical-align: -0.15em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mv-icon--14 { width: 14px; height: 14px; }
.mv-icon--16 { width: 16px; height: 16px; }
.mv-icon--18 { width: 18px; height: 18px; }
.mv-icon--20 { width: 20px; height: 20px; }
.mv-icon--24 { width: 24px; height: 24px; }
.mv-icon--28 { width: 28px; height: 28px; }
.mv-icon--32 { width: 32px; height: 32px; }
.mv-icon--48 { width: 48px; height: 48px; }
.mv-icon--primary, .mv-icon--primario { color: var(--mv-primary, #1647D8); }
.mv-icon--action, .mv-icon--accion { color: var(--mv-action, #3F6CDA); }
.mv-icon--accent, .mv-icon--acento { color: #B45309; }
.mv-icon--success, .mv-icon--exito { color: var(--mv-success, #00875C); }
.mv-icon--danger, .mv-icon--peligro { color: var(--mv-danger, #DF3236); }

.mv-icon-node {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Conmutador Minorista / Mayorista en Header */
.mgui-price-mode-toggle {
  display: inline-flex;
  align-items: center;
  background: rgba(11, 31, 68, 0.28);
  padding: 3px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.mgui-price-mode-toggle__btn {
  border: 0;
  background: transparent;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}
.mgui-price-mode-toggle__btn.is-active {
  background: #FFFFFF;
  color: #0B1F44;
}

/* 1. Hero Carrusel (mgui-hero-carousel) */
.mgui-hero-carousel {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #0B1F44;
  color: #FFFFFF;
}
.mgui-hero-carousel__slide {
  display: none;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 24px;
  padding: 32px 40px;
  min-height: 340px;
}
.mgui-hero-carousel__slide.is-active {
  display: grid;
}
.mgui-hero-carousel__slide--cobalto {
  background: linear-gradient(135deg, #0B1F44 0%, #1647D8 100%);
}
.mgui-hero-carousel__slide--oscuro {
  background: linear-gradient(135deg, #0B1F44 0%, #172236 100%);
}
.mgui-hero-carousel__slide--oro {
  background: linear-gradient(135deg, #1647D8 0%, #0B1F44 75%, #E5B65A 100%);
}
.mgui-hero-carousel__title {
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 700;
  line-height: 1.2;
  margin: 10px 0;
  color: #FFFFFF;
}
.mgui-hero-carousel__sub {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 18px;
}
.mgui-hero-carousel__media img {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  border-radius: 10px;
}
.mgui-hero-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(11, 31, 68, 0.72);
}
.mgui-hero-carousel__btn,
.mgui-hero-carousel__pause {
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mgui-hero-carousel__dots {
  display: inline-flex;
  gap: 6px;
}
.mgui-hero-carousel__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 0;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
}
.mgui-hero-carousel__dot.is-active {
  width: 24px;
  background: #E5B65A;
}

/* 2. Tarjetas de Acceso Rápido (mgui-quick-cards) */
.mgui-quick-cards__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.mgui-quick-cards__card {
  background: var(--mv-bg-surface, #FFFFFF);
  border: 1px solid var(--mv-border-subtle, #BFC5CF);
  border-radius: 8px;
  padding: 16px;
  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}
.mgui-quick-cards__img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  align-self: center;
}
.mgui-quick-cards__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--mv-fg-primary, #172236);
}
.mgui-quick-cards__desc {
  font-size: 13px;
  color: var(--mv-fg-muted, #46546A);
  margin: 0;
}
.mgui-quick-cards__cta {
  font-size: 13px;
  font-weight: 600;
  color: var(--mv-action, #3F6CDA);
  text-decoration: none;
}

/* 3. Oferta del Día (mgui-deal-of-day) */
.mgui-deal-of-day__layout {
  display: grid;
  grid-template-columns: 0.4fr 0.6fr;
  gap: 16px;
}
.mgui-deal-of-day__featured {
  background: var(--mv-bg-surface, #FFFFFF);
  border: 2px solid var(--mv-primary, #1647D8);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mgui-deal-of-day__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mgui-deal-of-day__timer {
  font-size: 13px;
  font-weight: 700;
  color: #DF3236;
}
.mgui-deal-of-day__strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

/* 4. Carrusel de Tiendas Oficiales (mgui-store-carousel) */
.mgui-store-carousel__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.mgui-store-carousel__card {
  background: var(--mv-bg-surface, #FFFFFF);
  border: 1px solid var(--mv-border-subtle, #BFC5CF);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.mgui-store-carousel__cover img {
  width: 100%;
  height: 96px;
  object-fit: cover;
}
.mgui-store-carousel__avatar {
  margin: -28px auto 0;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: #FFFFFF;
  border: 2px solid #FFFFFF;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  overflow: hidden;
}
.mgui-store-carousel__avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.mgui-store-carousel__body {
  padding: 12px 16px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 5. Banner CTA Vendedores / MercadoGestión (mgui-seller-cta) */
.mgui-seller-cta {
  display: grid;
  grid-template-columns: 0.6fr 0.4fr;
  align-items: center;
  gap: 24px;
  padding: 28px 32px;
  border-radius: 12px;
  background: linear-gradient(135deg, #0B1F44 0%, #1647D8 100%);
  color: #FFFFFF;
}
.mgui-seller-cta__title {
  font-size: 22px;
  font-weight: 700;
  color: #FFFFFF;
  margin: 8px 0 12px;
}
.mgui-seller-cta__list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mgui-seller-cta__list li {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 6. Barra de Confianza (mgui-trust-bar) y Tira de Medios de Pago (mgui-payment-strip) */
.mgui-trust-bar,
.mgui-payment-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  background: var(--mv-bg-surface, #FFFFFF);
  border: 1px solid var(--mv-border-subtle, #BFC5CF);
  border-radius: 8px;
  padding: 16px 20px;
}
.mgui-trust-bar__item,
.mgui-payment-strip__cell {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.mgui-payment-strip__cell--logos {
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 900px) {
  .mgui-quick-cards__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mgui-deal-of-day__layout,
  .mgui-seller-cta,
  .mgui-promo-split__grid { grid-template-columns: 1fr; }
  .mgui-store-carousel__grid,
  .mgui-trust-bar,
  .mgui-payment-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .mgui-hero-carousel__slide { grid-template-columns: 1fr; padding: 20px; }
  .mgui-quick-cards__grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .mgui-quick-cards__card { min-width: 200px; scroll-snap-align: start; }
  .mgui-deal-of-day__strip,
  .mgui-store-carousel__grid,
  .mgui-trust-bar,
  .mgui-payment-strip__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   AJUSTES BLOQUEANTES A3, A4, A5, B2, B3 (12_PENDIENTE_VPS · 13/11/2026)
   ========================================================================== */

/* A3: CTA en Hero con rol Acción (#3F6CDA) y oro P02 (#E5B65A) solo como acento */
.mgui-hero-carousel .mgui-btn--primary,
.mgui-hero-carousel__cta,
.mgui-studio-node:has(> .mgui-studio-node-bg[data-bg-tone="alerta"]:not([data-bg-alpha="0"])) .mgui-hero-carousel .mgui-btn--primary,
[data-cta-role="action"] {
  background: var(--mv-action, var(--mgui-color-accion, #3F6CDA)) !important;
  border-color: var(--mv-action, var(--mgui-color-accion, #3F6CDA)) !important;
  color: #FFFFFF !important;
}
.mgui-hero-carousel .mgui-btn--primary:hover,
.mgui-hero-carousel__cta:hover,
[data-cta-role="action"]:hover {
  background: var(--mv-action-hover, var(--mgui-color-accion-hover, #315CC9)) !important;
  border-color: var(--mv-action-hover, var(--mgui-color-accion-hover, #315CC9)) !important;
  color: #FFFFFF !important;
}
.mgui-hero-carousel__badge {
  background: rgba(229, 182, 90, 0.2) !important;
  color: #FFE8A3 !important;
  border: 1px solid rgba(229, 182, 90, 0.55) !important;
}

/* B2: Banners Dobles B2B / Mayoristas (mgui-promo-split) */
.mgui-promo-split {
  width: 100%;
}
.mgui-promo-split__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}
.mgui-promo-split__card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  border-radius: 12px;
  background: linear-gradient(125deg, #0B1F44 0%, #1647D8 100%);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
.mgui-promo-split__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.mgui-promo-split__title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  color: #FFFFFF;
}
.mgui-promo-split__sub {
  margin: 0 0 6px;
  font-size: 13.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.86);
}
.mgui-promo-split__media img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* A4: Footer Global 100% ancho de sección + Grilla de 5 columnas sin superposición */
.mgui-studio-node-content--fullbleed,
.mgui-studio-node-content:has(> [data-component="mgui-footer"]),
.mgui-studio-node-content:has(> [data-component="mgui-header"]),
div:has(> .mv-studio-footer-shell),
div:has(> .mv-studio-header-shell) {
  display: block !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: 100% !important;
}
[data-component="mgui-footer"],
.mv-studio-footer-shell,
[data-component="mgui-header"],
.mv-studio-header-shell {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.mv-studio-footer-shell {
  padding: 28px 24px 20px !important;
  background: var(--mv-brand-deep, #0B1F44) !important;
  color: #E2ECFF !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  margin-block-start: 0 !important;
}
.mgui-vd-footer-grid,
.mv-studio-footer-grid {
  display: grid !important;
  grid-template-columns: 1.35fr repeat(4, minmax(0, 1fr)) !important;
  gap: 24px !important;
  align-items: start !important;
  width: 100% !important;
}
.mv-studio-footer-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  min-width: 0 !important;
}
.mv-studio-footer-col__title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  margin: 0 0 4px 0 !important;
  line-height: 1.3 !important;
  white-space: normal !important;
}
.mv-studio-footer-col a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #CCDAF0 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
  white-space: normal !important;
}
.mv-studio-footer-col a:hover {
  color: #FFFFFF !important;
  text-decoration: underline !important;
}
.mv-studio-footer-col p {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: #B8C7E0 !important;
}
.mv-studio-footer-col .mgui-cluster {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 4px !important;
}
.mv-studio-footer-legal {
  margin-top: 20px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  font-size: 12px !important;
  color: #94A3B8 !important;
}

/* A5: Header Global 2 franjas · Franja 1 con buscador + toggle + CTA Vendé · Franja 2 en 1 solo renglón (980–1366px+) */
.mv-studio-header-shell .mgui-vd-mainbar {
  background: linear-gradient(90deg, #0B1F44 0%, #1647D8 65%, #1E56F0 100%) !important;
  padding: 8px 16px !important;
}
.mv-studio-header-shell .mgui-vd-mainbar__inner {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  max-width: 1380px !important;
  margin: 0 auto !important;
  width: 100% !important;
}
.mv-studio-header-shell .mgui-vd-searchbar {
  flex: 1 1 280px !important;
  max-width: 640px !important;
  height: 38px !important;
  block-size: 38px !important;
  border-radius: 6px !important;
}
.mv-studio-header-shell .mgui-vd-mainbar__right {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
.mv-studio-header-shell .mgui-vd-mainbar__cta-vender {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  height: 34px !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.14) !important;
  color: #FFFFFF !important;
  border: 1.5px solid #E5B65A !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.mv-studio-header-shell .mgui-vd-subbar {
  background: #0B1F44 !important;
  padding: 4px 16px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.mv-studio-header-shell .mgui-vd-subbar__inner {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  max-width: 1380px !important;
  margin: 0 auto !important;
  width: 100% !important;
  min-height: 34px !important;
}
.mv-studio-header-shell .mgui-vd-geo-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 8px !important;
  border-radius: 5px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #E2ECFF !important;
  font-size: 12.5px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
}
.mv-studio-header-shell .mgui-vd-subnav {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
.mv-studio-header-shell .mgui-vd-subnav::-webkit-scrollbar {
  display: none !important;
}
.mv-studio-header-shell .mgui-vd-cat-trigger,
.mv-studio-header-shell .mgui-vd-subnav__link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 7px !important;
  border-radius: 4px !important;
  color: #E2ECFF !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.mv-studio-header-shell .mgui-vd-cat-trigger:hover,
.mv-studio-header-shell .mgui-vd-subnav__link:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #FFFFFF !important;
}
.mv-studio-header-shell .mgui-vd-user-actions {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
.mv-studio-header-shell .mgui-vd-action-btn,
.mv-studio-header-shell .mgui-vd-cart-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 7px !important;
  border-radius: 4px !important;
  color: #FFFFFF !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.mv-studio-header-shell .mgui-vd-cart-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  background: #E5B65A !important;
  color: #0B1F44 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

/* B3: Ícono SVG en tarjetas de la paleta del editor */
.mgui-studio-catalog-card__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 960px) {
  .mgui-vd-footer-grid,
  .mv-studio-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .mv-studio-header-shell .mgui-vd-mainbar__inner,
  .mv-studio-header-shell .mgui-vd-subbar__inner {
    flex-wrap: wrap !important;
  }
}
@media (max-width: 640px) {
  .mgui-vd-footer-grid,
  .mv-studio-footer-grid,
  .mgui-promo-split__card {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   CORRECCIONES 12_PENDIENTE_VPS (v2) — PRODUCCIÓN, GRILLAS, CARRUSELES,
   ROLES DE BOTONES, TIPOGRAFÍA D5 Y RESPONSIVE 390 / 980 / 1280 / 1440 PX
   ========================================================================== */

/* P0.1: Todos los botones principales usan el rol "Acción" (#3F6CDA) y los secundarios superficie neutra/azul suave; nunca amarillo de fondo */
.mgui-btn--primary,
.mgui-vd-pcard__btn-carrito,
.mgui-vd-pcard__btn-comprar,
.mgui-promo-split .mgui-btn--primary,
.mgui-seller-cta .mgui-btn--primary,
.mgui-deal-of-day .mgui-btn--primary,
.mgui-filter-sidebar .mgui-btn--primary,
.mgui-cart-session .mgui-btn--primary,
.mgui-pdp-reviews .mgui-btn--primary,
.mgui-studio-node[data-studio-node-type="boton"] .mgui-btn--primary {
  background: #3F6CDA !important;
  background-color: #3F6CDA !important;
  color: #FFFFFF !important;
  border: 1px solid #3F6CDA !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
}
.mgui-btn--primary:hover,
.mgui-vd-pcard__btn-carrito:hover,
.mgui-promo-split .mgui-btn--primary:hover,
.mgui-seller-cta .mgui-btn--primary:hover,
.mgui-studio-node[data-studio-node-type="boton"] .mgui-btn--primary:hover {
  background: #315CC9 !important;
  background-color: #315CC9 !important;
  border-color: #315CC9 !important;
  color: #FFFFFF !important;
}
.mgui-btn--secondary,
.mgui-filter-sidebar .mgui-btn--secondary,
.mgui-cart-session .mgui-btn--secondary,
.mgui-pdp-reviews .mgui-btn--secondary {
  background: #EFF6FF !important;
  background-color: #EFF6FF !important;
  color: #1E40AF !important;
  border: 1px solid #BFDBFE !important;
}
.mgui-btn--secondary:hover,
.mgui-filter-sidebar .mgui-btn--secondary:hover {
  background: #DBEAFE !important;
  background-color: #DBEAFE !important;
  color: #1E3A8A !important;
}
/* Eliminar marco/fondo amarillo heredado en nodos de tipo botón de la paleta */
.mgui-studio-node[data-studio-node-type="boton"] > .mgui-studio-node-bg,
.mgui-studio-node[data-studio-node-type="boton"] > .mv-studio-node-bg {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Un único botón "Agregar al carrito" de ancho completo en cada tarjeta de producto (05 §5) */
.mgui-vd-pcard__actions {
  display: flex !important;
  width: 100% !important;
  margin-top: 6px !important;
}
.mgui-vd-pcard__actions .mgui-vd-pcard__btn-carrito {
  width: 100% !important;
  justify-content: center !important;
  min-height: 36px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
}

/* P0.2 y P1.8: Contenedor de sección de ancho completo cuando delega grilla a su hijo _grid */
.mgui-studio-sec__inner:not(.mgui-studio-grid) {
  display: block !important;
  width: 100% !important;
  max-width: 1320px !important;
  margin-inline: auto !important;
}
.mgui-studio-node[data-studio-node-type="cuadricula"] {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
}
.mgui-studio-node[data-studio-node-type="celda"],
.mgui-studio-node[data-studio-node-type="pila"],
.mgui-studio-node[data-studio-node-type="componente_comercial"] {
  min-width: 0 !important;
  width: 100% !important;
}

/* Ficha PDP de 3 columnas (sec-pdp-3col) y grillas de 3 columnas a ancho completo */
.mgui-studio-grid--3_col,
.mgui-studio-grid[data-grid-layout="3_col"] {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
  width: 100% !important;
  align-items: start !important;
}
[data-studio-node-id="sec-pdp-3col_grid"] > .mgui-studio-grid--3_col {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(290px, 0.85fr) !important;
  gap: 24px !important;
}

/* Catálogo y Tienda Oficial: Sidebar 280px + Grilla 3 columnas (2_col_35_65) */
.mgui-studio-grid--2_col_35_65,
.mgui-studio-grid[data-grid-layout="2_col_35_65"] {
  display: grid !important;
  grid-template-columns: 280px minmax(0, 1fr) !important;
  gap: 24px !important;
  width: 100% !important;
  align-items: start !important;
}
.mgui-studio-grid--2_col_35_65 .mgui-vd-grid-productos,
.mgui-studio-grid[data-grid-layout="2_col_35_65"] .mgui-vd-grid-productos {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
}

/* P0.3: Carrusel horizontal real (mgui-product-carousel) en 1 sola fila con scroll-snap, flechas y dots */
.mgui-product-carousel {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 16px 18px;
  width: 100%;
  box-sizing: border-box;
}
.mgui-product-carousel__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.mgui-product-carousel__title,
.mgui-section-heading {
  font-size: 21px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  margin: 0 0 10px 0 !important;
}
.mgui-product-carousel__header .mgui-product-carousel__title {
  margin: 0 !important;
}
.mgui-product-carousel__more {
  font-size: 13.5px;
  font-weight: 600;
  color: #3F6CDA;
  text-decoration: none;
  white-space: nowrap;
}
.mgui-product-carousel__more:hover {
  text-decoration: underline;
}
.mgui-product-carousel__viewport {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.mgui-product-carousel__track {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: calc((100% - 42px) / 4) !important;
  gap: 14px !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  width: 100% !important;
  padding: 2px 2px 6px !important;
}
.mgui-product-carousel__track::-webkit-scrollbar {
  display: none;
}
.mgui-product-carousel__slide {
  scroll-snap-align: start;
  min-width: 0;
  display: flex;
}
.mgui-product-carousel__slide > .mgui-vd-pcard {
  width: 100%;
}
.mgui-product-carousel__arrow {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  z-index: 5;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid #CBD5E1;
  background: rgba(255, 255, 255, 0.96);
  color: #0F172A;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mgui-product-carousel__arrow--prev {
  left: -10px;
}
.mgui-product-carousel__arrow--next {
  right: -10px;
}
.mgui-product-carousel__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}
.mgui-product-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: #CBD5E1;
  cursor: pointer;
}
.mgui-product-carousel__dot.is-active {
  width: 20px;
  background: #3F6CDA;
}

/* Compactación de tarjetas y secciones en Inicio para altura total < 6.500 px */
.mgui-studio-sec {
  padding-block: 10px !important;
}
.mgui-vd-pcard__media {
  height: 170px !important;
  padding: 10px !important;
}
.mgui-vd-pcard__img {
  max-height: 150px !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
}
.mgui-vd-pcard__body {
  padding: 10px 12px 12px !important;
  gap: 6px !important;
}
.mgui-vd-pcard__title {
  font-size: 14px !important;
  line-height: 1.3 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.mgui-vd-pcard__price {
  font-size: 20px !important;
  font-weight: 700 !important;
}

/* P1.13: Escala tipográfica D5 — H2 de secciones a 20–22px (nunca 48px) y H1 de Catálogo a 28px */
h2.mgui-studio-text,
h2.mgui-studio-text[data-typo-size="xl"],
h2.mgui-studio-text[data-typo-size="lg"] {
  font-size: 22px !important;
  line-height: 1.28 !important;
}
[data-studio-node-id="sec-cat-header_tit"] h1,
[data-studio-node-id="sec-cat-header_tit"] h2,
[data-studio-node-id="sec-ofertas-banner_tit"] h1,
[data-studio-node-id="sec-ofertas-banner_tit"] h2 {
  font-size: 28px !important;
  line-height: 1.2 !important;
}

/* P1.8: Barra superior de listado (Breadcrumb, contador, chips, ordenar, vista) y Paginación */
.mgui-catalog-toolbar {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mgui-catalog-toolbar__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mgui-catalog-toolbar__breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #64748B;
}
.mgui-catalog-toolbar__breadcrumb a {
  color: #3F6CDA;
  text-decoration: none;
}
.mgui-catalog-toolbar__title-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 2px;
}
.mgui-catalog-toolbar__title {
  font-size: 18px;
  font-weight: 700;
  color: #0F172A;
}
.mgui-catalog-toolbar__count {
  font-size: 13px;
  color: #64748B;
}
.mgui-catalog-toolbar__controls {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.mgui-catalog-toolbar__sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #475569;
}
.mgui-catalog-toolbar__sort select {
  height: 34px;
  padding: 0 10px;
  font-size: 13px;
}
.mgui-catalog-toolbar__view {
  display: inline-flex;
  border: 1px solid #CBD5E1;
  border-radius: 6px;
  overflow: hidden;
}
.mgui-catalog-toolbar__view-btn {
  width: 34px;
  height: 32px;
  border: 0;
  background: #FFFFFF;
  color: #64748B;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mgui-catalog-toolbar__view-btn.is-active {
  background: #EFF6FF;
  color: #3F6CDA;
}
.mgui-catalog-toolbar__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid #F1F5F9;
}
.mgui-catalog-pagination {
  margin-top: 18px;
  padding: 12px 16px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mgui-catalog-pagination__info {
  font-size: 13px;
  color: #475569;
}
.mgui-catalog-pagination__pages {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mgui-catalog-pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid #CBD5E1;
  background: #FFFFFF;
  color: #0F172A;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.mgui-catalog-pagination__btn.is-active {
  background: #3F6CDA;
  border-color: #3F6CDA;
  color: #FFFFFF;
}

/* Filtros laterales enriquecidos (mgui-filter-sidebar) */
.mgui-filter-sidebar__switches {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid #E2E8F0;
}
.mgui-filter-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #1E293B;
  cursor: pointer;
}
.mgui-filter-switch__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mgui-filter-sidebar__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 0;
  border-bottom: 1px solid #E2E8F0;
}
.mgui-filter-sidebar__group-title {
  font-size: 13px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 2px;
}
.mgui-filter-sidebar__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: #334155;
  text-decoration: none;
  padding: 3px 0;
}
.mgui-filter-sidebar__item:hover {
  color: #3F6CDA;
}
.mgui-filter-sidebar__price-inputs {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  align-items: center;
  gap: 6px;
}
.mgui-filter-sidebar__price-inputs input {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 0 8px;
  font-size: 12.5px;
}

/* Galería de miniaturas PDP, Precio sin impuestos y Opiniones (P0.6 y P1.12) */
.mgui-pdp-gallery {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.mgui-pdp-gallery__main {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
}
.mgui-pdp-gallery__img {
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
}
.mgui-pdp-gallery__thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
}
.mgui-pdp-gallery__thumb {
  width: 58px;
  height: 58px;
  border-radius: 8px;
  border: 1px solid #CBD5E1;
  background: #FFFFFF;
  padding: 4px;
  cursor: pointer;
  flex-shrink: 0;
}
.mgui-pdp-gallery__thumb.is-active {
  border: 2px solid #3F6CDA;
}
.mgui-pdp-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.mgui-pdp-net-price {
  font-size: 13px;
  color: #475569;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  padding: 6px 10px;
  margin-top: 4px;
}
.mgui-pdp-reviews {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 18px 20px;
}
.mgui-pdp-reviews__layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 24px;
  margin-top: 12px;
}
.mgui-pdp-reviews__score-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mgui-pdp-reviews__score {
  font-size: 40px;
  font-weight: 800;
  color: #0F172A;
  line-height: 1;
}
.mgui-pdp-reviews__stars {
  display: inline-flex;
  gap: 2px;
  color: #D97706;
}
.mgui-pdp-reviews__bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}
.mgui-pdp-reviews__bar-row {
  display: grid;
  grid-template-columns: 36px 1fr 38px;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #475569;
}
.mgui-pdp-reviews__bar-track {
  height: 6px;
  background: #E2E8F0;
  border-radius: 999px;
  overflow: hidden;
}
.mgui-pdp-reviews__bar-fill {
  display: block;
  height: 100%;
  background: #3F6CDA;
  border-radius: 999px;
}
.mgui-pdp-reviews__bar-fill--5 { width: 84%; }
.mgui-pdp-reviews__bar-fill--4 { width: 12%; }
.mgui-pdp-reviews__bar-fill--3 { width: 3%; }
.mgui-pdp-reviews__bar-fill--2 { width: 1%; }
.mgui-pdp-reviews__bar-fill--1 { width: 0%; }
.mgui-pdp-reviews__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mgui-pdp-reviews__item {
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mgui-pdp-reviews__item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Carrito conectado a la sesión (mgui-cart-session, P0.4) */
.mgui-cart-session {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 24px;
  width: 100%;
  box-sizing: border-box;
}
.mgui-cart-session__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 28px 16px;
}
.mgui-cart-session__empty-title {
  font-size: 22px;
  font-weight: 700;
  color: #0F172A;
  margin: 0;
}
.mgui-cart-session__empty-desc {
  max-width: 520px;
  margin: 0;
}
.mgui-cart-session__empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
}
.mgui-cart-session__suggestions {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #E2E8F0;
}
.mgui-cart-session__suggestions-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

/* Vitrina de tiendas oficiales: miniaturas de 3 productos con precio (07 D7) */
.mgui-store-carousel__products {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 10px 0 !important;
}
.mgui-store-carousel__prod-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  background: #F8FAFC;
  text-decoration: none;
  color: #0F172A;
}
.mgui-store-carousel__prod-thumb img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.mgui-store-carousel__prod-price {
  font-size: 11.5px;
  font-weight: 700;
  color: #0F172A;
}

/* Barra fija inferior en mobile para PDP (oculta en desktop, P1.11) */
.mgui-pdp-mobile-sticky-bar {
  display: none;
}

/* Botón hamburguesa del Header (oculto en desktop, visible en mobile, P1.9) */
.mv-studio-header-shell .mgui-vd-mobile-menu-btn {
  display: none !important;
}

/* P2.15: Barra "Configurar fuente de datos" en el lienzo del editor sin superponerse al contenido */
.mgui-studio-node-datasource {
  position: relative !important;
  z-index: 3 !important;
  margin: 0 0 8px 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Prevenir cualquier scroll horizontal en todos los anchos (390, 980, 1280, 1440 px) */
html,
body,
.mv-sitio,
.mgui-studio-canvas-root,
.mgui-studio-sec {
  max-width: 100%;
  overflow-x: clip;
}

/* P1.9: Responsive a 980 px (Tablet / Laptop compacta <= 1180px) */
@media (max-width: 1180px) {
  /* Footer en 2 columnas a 980px para que las 5 columnas nunca desborden */
  .mgui-vd-footer-grid,
  .mv-studio-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }
  /* Oferta del día compacta a 980px sin desborde */
  .mgui-deal-of-day__layout {
    grid-template-columns: minmax(250px, 38%) minmax(0, 1fr) !important;
    gap: 14px !important;
  }
  .mgui-deal-of-day__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  /* Header Franja 2 compacta en 1 renglón a 980px */
  .mv-studio-header-shell .mgui-vd-subbar__inner {
    gap: 6px !important;
  }
  .mv-studio-header-shell .mgui-vd-cat-trigger,
  .mv-studio-header-shell .mgui-vd-subnav__link,
  .mv-studio-header-shell .mgui-vd-action-btn,
  .mv-studio-header-shell .mgui-vd-cart-btn {
    padding: 4px 5px !important;
    font-size: 12px !important;
  }
  /* Catálogo a 980px: sidebar 230px + 2 o 3 columnas limpias */
  .mgui-studio-grid--2_col_35_65,
  .mgui-studio-grid[data-grid-layout="2_col_35_65"] {
    grid-template-columns: 230px minmax(0, 1fr) !important;
    gap: 16px !important;
  }
  .mgui-studio-grid--2_col_35_65 .mgui-vd-grid-productos,
  .mgui-studio-grid[data-grid-layout="2_col_35_65"] .mgui-vd-grid-productos {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

/* Responsive intermedio <= 900px */
@media (max-width: 900px) {
  .mgui-studio-grid--3_col,
  .mgui-studio-grid[data-grid-layout="3_col"],
  [data-studio-node-id="sec-pdp-3col_grid"] > .mgui-studio-grid--3_col,
  .mgui-studio-grid--2_col_35_65,
  .mgui-studio-grid[data-grid-layout="2_col_35_65"],
  .mgui-pdp-reviews__layout,
  .mgui-deal-of-day__layout {
    grid-template-columns: 1fr !important;
  }
  .mgui-studio-grid--2_col_35_65 .mgui-vd-grid-productos,
  .mgui-studio-grid[data-grid-layout="2_col_35_65"] .mgui-vd-grid-productos {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .mgui-product-carousel__track {
    grid-auto-columns: calc((100% - 24px) / 2.5) !important;
  }
}

/* P1.9, P1.10, P1.11: Mobile a 390 px (<= 767px) */
@media (max-width: 767px) {
  /* Header mobile con botón hamburguesa (04 §2) */
  .mv-studio-header-shell .mgui-vd-mobile-menu-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
  }
  .mv-studio-header-shell .mgui-vd-mainbar__inner {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .mv-studio-header-shell .mgui-vd-brand__logo-h {
    width: 132px !important;
    height: auto !important;
  }
  .mv-studio-header-shell .mgui-vd-searchbar {
    order: 3 !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
  .mv-studio-header-shell .mgui-vd-mainbar__cta-vender {
    display: none !important;
  }
  .mv-studio-header-shell .mgui-vd-subnav {
    display: none !important;
  }
  .mv-studio-header-shell .mgui-vd-subbar__inner {
    justify-content: space-between !important;
  }
  /* P1.10: Tarjetas de acceso rápido (mgui-quick-cards) en carrusel horizontal en mobile */
  .mgui-quick-cards__grid {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 148px !important;
    gap: 10px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    padding-bottom: 6px !important;
  }
  .mgui-quick-cards__card {
    scroll-snap-align: start;
  }
  /* Carrusel de productos en mobile: 2 tarjetas por vista */
  .mgui-product-carousel__track {
    grid-auto-columns: calc((100% - 12px) / 2.05) !important;
    gap: 10px !important;
  }
  .mgui-product-carousel__title,
  .mgui-section-heading,
  h2.mgui-studio-text {
    font-size: 19px !important;
  }
  /* P1.11: Barra fija inferior en mobile en la Ficha PDP */
  .mgui-pdp-mobile-sticky-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    background: #FFFFFF;
    border-top: 1px solid #CBD5E1;
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.12);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .mgui-pdp-mobile-sticky-bar__price {
    display: flex;
    flex-direction: column;
    font-size: 18px;
    font-weight: 800;
    color: #0F172A;
  }
  .mgui-pdp-mobile-sticky-bar__actions {
    display: inline-flex;
    gap: 8px;
  }
  /* P1.9: Eliminar padding horizontal acumulado en nodos anidados en mobile (390px) para que el Hero y los bloques ocupen todo el ancho útil */
  .mgui-studio-sec:not([data-studio-node-id^="sec-mv-header"]):not([data-studio-node-id^="sec-mv-footer"]) > .mgui-studio-sec__inner {
    padding-inline: 10px !important;
  }
  .mgui-studio-node[data-studio-node-type="cuadricula"] > .mgui-studio-node-content,
  .mgui-studio-node[data-studio-node-type="celda"] > .mgui-studio-node-content,
  .mgui-studio-node[data-studio-node-type="pila"] > .mgui-studio-node-content,
  .mgui-studio-node[data-studio-node-type="componente_comercial"] > .mgui-studio-node-content {
    padding-inline: 0 !important;
  }
}

/* Cabecera de tienda única a ancho completo en /tienda (REGLA_tienda-no-usa-slug) */
.mgui-store-carousel__grid--single {
  grid-template-columns: 1fr !important;
}
.mgui-store-carousel__thumbs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  max-width: 440px !important;
  margin: 10px auto !important;
}
.mgui-store-carousel__thumb {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 8px !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 8px !important;
  background: #F8FAFC !important;
  text-decoration: none !important;
  color: #0F172A !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
.mgui-store-carousel__thumb img {
  width: 64px !important;
  height: 64px !important;
  object-fit: contain !important;
  background: #FFFFFF !important;
  border-radius: 6px !important;
}

/* Base de botones .mgui-btn (padding, radio 8px, alineación) y ficha PDP */
.mgui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}
.mgui-btn--sm {
  padding: 6px 12px;
  font-size: 13px;
}
.mgui-btn--block {
  display: flex;
  width: 100%;
}
.mgui-pdp-ficha__title {
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #0F172A !important;
  margin: 4px 0 !important;
}
@media (min-width: 960px) {
  .mgui-category-grid__list {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

/* Botón de arrepentimiento legible sobre el fondo oscuro del footer (P1.11) */
.mv-studio-footer-col .mgui-btn--secondary {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  white-space: normal !important;
  text-align: left !important;
  justify-content: flex-start !important;
  line-height: 1.3 !important;
  padding: 6px 10px !important;
}
.mv-studio-footer-col .mgui-btn--secondary:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
}

/* P1.10: En >= 768px (incluido 980px), la Franja 2 del Header NUNCA cae a 2 renglones */
@media (min-width: 768px) {
  .mv-studio-header-shell .mgui-vd-mainbar__inner,
  .mv-studio-header-shell .mgui-vd-subbar__inner {
    flex-wrap: nowrap !important;
  }
}
@media (min-width: 768px) and (max-width: 1180px) {
  .mv-studio-header-shell .mgui-vd-subbar {
    padding: 4px 10px !important;
  }
  .mv-studio-header-shell .mgui-vd-subbar__inner {
    gap: 6px !important;
    padding-inline: 8px !important;
  }
  .mv-studio-header-shell .mgui-vd-geo-pill {
    padding: 3px 6px !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
  }
  .mv-studio-header-shell .mgui-vd-geo-pill svg {
    width: 13px !important;
    height: 13px !important;
  }
  .mv-studio-header-shell .mgui-vd-subnav {
    gap: 2px !important;
    flex: 1 1 auto !important;
    justify-content: center !important;
    min-width: 0 !important;
  }
  .mv-studio-header-shell .mgui-vd-subnav__link svg,
  .mv-studio-header-shell .mgui-vd-cat-trigger svg {
    display: none !important;
  }
  .mv-studio-header-shell .mgui-vd-cat-trigger,
  .mv-studio-header-shell .mgui-vd-subnav__link,
  .mv-studio-header-shell .mgui-vd-action-btn,
  .mv-studio-header-shell .mgui-vd-cart-btn {
    padding: 3px 5px !important;
    font-size: 11px !important;
    gap: 3px !important;
  }
  .mv-studio-header-shell .mgui-vd-user-actions {
    gap: 2px !important;
    flex-shrink: 0 !important;
  }
}