/* MASI Mobile 1.3 "Minimal" — home móvil */
#masi-home-block { display: none !important; }

@media (max-width: 767px) {
  #masi-home-block.is-placed,
  #masi-home-block:not([hidden]) {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 32px;
    font-family: var(--masi-font);
    color: var(--masi-ink);
  }
  /* Los selectores llevan el ID para ganar a las reglas generales de p, h2 y enlaces del tema */

  /* ---- Saludo ---- */
  #masi-home-block .masi-hello { margin-top: 4px; }
  #masi-home-block .masi-hello__name {
    margin: 0 0 2px !important;
    color: var(--masi-muted) !important;
    font-family: var(--masi-font) !important;
    font-size: var(--masi-fs-sm) !important;
    font-weight: 700;
  }
  #masi-home-block .masi-hello__title {
    margin: 0 !important;
    color: var(--masi-ink) !important;
    font-family: var(--masi-font) !important;
    font-size: var(--masi-fs-xxl) !important;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
  }

  /* ---- Buscador ---- */
  #masi-home-block .masi-search {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    margin: 4px 0 4px;
    padding: 0 6px 0 16px;
    border-radius: 26px;
    background: var(--masi-bg);
    color: var(--masi-muted);
  }
  #masi-home-block .masi-search:focus-within { box-shadow: inset 0 0 0 2px var(--masi-ink); }
  #masi-home-block .masi-search__icon { flex: 0 0 20px; width: 20px; height: 20px; }
  #masi-home-block .masi-search__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--masi-ink);
    font-family: var(--masi-font);
    font-size: var(--masi-fs-md);
    font-weight: 600;
    -webkit-appearance: none;
  }
  #masi-home-block .masi-search__input::placeholder { color: var(--masi-muted); opacity: 1; }
  #masi-home-block .masi-search__scan {
    flex: 0 0 40px;
    height: 40px;
    border: 0;
    border-radius: 20px;
    background: #fff;
    color: var(--masi-ink);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #masi-home-block .masi-search__scan[hidden] { display: none; }
  #masi-home-block .masi-search__scan svg { width: 18px; height: 18px; }

  /* ---- Accesos principales ---- */
  #masi-home-block .masi-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  #masi-home-block a.masi-action,
  #masi-home-block a.masi-action:link,
  #masi-home-block a.masi-action:visited {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    min-height: 132px;
    padding: 16px;
    border-radius: 22px;
    background: var(--masi-bg);
    color: var(--masi-ink) !important;
    font-family: var(--masi-font) !important;
    text-decoration: none !important;
  }
  #masi-home-block a.masi-action--primary,
  #masi-home-block a.masi-action--primary:link,
  #masi-home-block a.masi-action--primary:visited {
    background: var(--masi-accent);
    color: #fff !important;
  }
  #masi-home-block a.masi-action:active { transform: scale(.98); }
  #masi-home-block .masi-action__icon {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background: #fff;
    color: var(--masi-ink);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #masi-home-block .masi-action__icon svg { width: 20px; height: 20px; }
  #masi-home-block .masi-action__text { display: flex; flex-direction: column; gap: 3px; }
  #masi-home-block .masi-action__title { font-size: var(--masi-fs-md) !important; font-weight: 800; line-height: 1.2; }
  #masi-home-block .masi-action__meta { font-size: var(--masi-fs-xs) !important; font-weight: 600; line-height: 1.3; opacity: .85; }
  #masi-home-block a.masi-action:not(.masi-action--primary) .masi-action__meta { color: var(--masi-muted); opacity: 1; }

  /* ---- Instalar la app ---- */
  #masi-home-block .masi-install[hidden] { display: none !important; }
  #masi-home-block .masi-install {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 6px 12px 14px;
    border: 1px solid var(--masi-line);
    border-radius: 22px;
  }
  #masi-home-block .masi-install__logo {
    flex: 0 0 40px;
    height: 40px;
    border-radius: 12px;
    background: #e7314c;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--masi-font);
    font-size: var(--masi-fs-2xs);
    font-weight: 700;
    letter-spacing: .04em;
  }
  #masi-home-block .masi-install__text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  #masi-home-block .masi-install__title { font-size: var(--masi-fs-sm); font-weight: 800; }
  #masi-home-block .masi-install__meta { font-size: var(--masi-fs-xs); font-weight: 600; line-height: 1.35; color: var(--masi-muted); }
  #masi-home-block .masi-install__meta[hidden],
  #masi-home-block .masi-install__btn[hidden] { display: none; }
  #masi-home-block .masi-install__btn {
    flex: 0 0 auto;
    height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 20px;
    background: var(--masi-ink);
    color: #fff;
    font-family: var(--masi-font);
    font-size: var(--masi-fs-sm);
    font-weight: 800;
  }
  #masi-home-block .masi-install__close {
    flex: 0 0 36px;
    height: 40px;
    border: 0;
    background: transparent;
    color: var(--masi-muted);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #masi-home-block .masi-install__close svg { width: 18px; height: 18px; }

  /* ---- Cabeceras de sección ---- */
  #masi-home-block .masi-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
  }
  #masi-home-block .masi-head__title {
    margin: 0 !important;
    color: var(--masi-ink) !important;
    font-family: var(--masi-font) !important;
    font-size: var(--masi-fs-lg) !important;
    font-weight: 800;
    letter-spacing: -0.01em;
  }
  #masi-home-block a.masi-head__more,
  #masi-home-block a.masi-head__more:link,
  #masi-home-block a.masi-head__more:visited {
    padding: 10px 0 10px 12px;
    color: var(--masi-muted) !important;
    font-family: var(--masi-font) !important;
    font-size: var(--masi-fs-sm) !important;
    font-weight: 700;
    text-decoration: none !important;
  }
  #masi-home-block a.masi-head__more::after { content: " ›"; }

  /* ---- Catálogo en cuadrícula ---- */
  #masi-home-block .masi-cats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  #masi-home-block a.masi-cat,
  #masi-home-block a.masi-cat:link,
  #masi-home-block a.masi-cat:visited {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 92px;
    padding: 12px;
    border-radius: 18px;
    background: var(--masi-bg);
    color: var(--masi-ink) !important;
    font-family: var(--masi-font) !important;
    font-size: var(--masi-fs-sm) !important;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none !important;
  }
  #masi-home-block .masi-cat__img {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
  }
  #masi-home-block .masi-cat__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
  #masi-home-block .masi-cat__img.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--masi-muted);
  }

  /* ---- Campaña activa ---- */
  #masi-home-block .masi-campaign,
  #masi-home-block a.masi-campaign:link,
  #masi-home-block a.masi-campaign:visited {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 16px;
    padding: 20px;
    border-radius: 22px;
    background: var(--masi-ink);
    color: #fff !important;
    font-family: var(--masi-font) !important;
    text-decoration: none !important;
  }
  #masi-home-block .masi-campaign__label {
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--masi-accent);
    font-size: var(--masi-fs-xs);
    font-weight: 800;
  }
  #masi-home-block .masi-campaign__title { margin-top: 6px; font-size: var(--masi-fs-xl); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
  #masi-home-block .masi-campaign__text { font-size: var(--masi-fs-sm); font-weight: 600; opacity: .8; }
  #masi-home-block .masi-campaign__cta { display: flex; align-items: center; gap: 4px; margin-top: 8px; font-size: var(--masi-fs-sm); font-weight: 800; }
  #masi-home-block .masi-campaign__cta svg { width: 16px; height: 16px; }

  /* ---- Banner de imagen (alto reservado: sin saltos) ---- */
  #masi-home-block .masi-banner { display: block; border-radius: 22px; overflow: hidden; background: var(--masi-bg); }
  #masi-home-block .masi-banner img { display: block; width: 100%; height: auto; }

  /* ---- Carruseles ---- */
  #masi-home-block .masi-rail {
    display: flex;
    gap: 12px;
    margin: 0 -15px;
    padding: 2px 15px 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 15px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #masi-home-block .masi-rail::-webkit-scrollbar { display: none; }

  #masi-home-block .masi-card {
    flex: 0 0 148px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  #masi-home-block .masi-card__img {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 148px;
    height: 148px;
    border-radius: var(--masi-radius);
    background: var(--masi-bg);
    overflow: hidden;
  }
  #masi-home-block .masi-card__img img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
  #masi-home-block .masi-card__badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--masi-ink);
    color: #fff;
    font-size: var(--masi-fs-2xs);
    font-weight: 800;
  }
  #masi-home-block .masi-card__badge--drop { background: var(--masi-accent); }
  #masi-home-block a.masi-card__name,
  #masi-home-block a.masi-card__name:link,
  #masi-home-block a.masi-card__name:visited {
    min-height: 34px;
    color: var(--masi-ink) !important;
    font-family: var(--masi-font) !important;
    font-size: var(--masi-fs-sm) !important;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #masi-home-block .masi-card__meta { font-size: var(--masi-fs-xs); font-weight: 600; color: var(--masi-muted); }
  #masi-home-block .masi-card__row { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 2px; }
  #masi-home-block .masi-card__price { font-size: var(--masi-fs-md); font-weight: 800; line-height: 1.15; }
  #masi-home-block .masi-card__old { display: block; font-size: var(--masi-fs-xs); font-weight: 600; color: var(--masi-muted); }
  #masi-home-block .masi-card__form { margin: 0; }

  /* ---- Foco visible para teclado ---- */
  #masi-home-block a:focus-visible,
  #masi-home-block button:focus-visible,
  #masi-home-block input:focus-visible {
    outline: 2px solid var(--masi-ink);
    outline-offset: 2px;
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  #masi-home-block a.masi-action:active { transform: none; }
}