/* ==========================================================================
   MAGIVERCOL · CONVERSIÓN EN MÓVIL — v1 (29 sep 2026)
   Pedido de Miguel: "que alguien entre y le dé ganas de comprar, tenga todo
   claro y sea muy fácil comprar". Acompaña al nuevo templates/home.tpl
   (hero con oferta, favoritos primero) y a magivercol-producto-v1.js.
   Todo pensado a 390 px; escritorio solo hereda lo que no estorba.
   ========================================================================== */

/* --- Franja de confianza bajo el hero ---------------------------------- */
.mg-confia{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 18px;
  margin:26px auto 0;max-width:560px;font-size:12.5px;color:var(--mg-ink-2)}
.mg-confia b{color:var(--mg-ink);font-weight:700}
.mg-confia__star{display:inline-block;width:12px;height:12px;vertical-align:-1px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cpath fill='%23F5B82E' d='M8.5 0l2.5 5.3 5.8.7-4.3 4 1.1 5.8-5.1-2.9-5.1 2.9 1.1-5.8L.2 6l5.8-.7z'/%3E%3C/svg%3E") no-repeat center/contain}
.mg-confia__pagos{display:inline-flex;align-items:center;gap:10px;flex-basis:100%;justify-content:center;
  margin-top:6px;padding-top:12px;border-top:1px solid var(--mg-line)}
.mg-confia__pagos img{height:18px;width:auto;opacity:.9}
.mg-confia__pagos img[alt="Bold"]{height:13px}
@media (max-width:859px){
  .mg-hero{padding-bottom:22px}
  .mg-hero__cta{margin-top:26px}
  .mg-hero .mg-body-lg{font-size:15.5px}
  .mg-confia{margin-top:20px;gap:6px 14px;font-size:12px}
}

/* --- Plataformas: en celular, fila compacta deslizable ------------------- */
@media (max-width:859px){
  .mg-plats{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
    margin:0 calc(-1 * var(--mg-gut,16px));padding:4px var(--mg-gut,16px) 14px;scrollbar-width:none}
  .mg-plats::-webkit-scrollbar{display:none}
  .mg-plat-card{flex:0 0 150px;scroll-snap-align:start;padding:16px 14px;gap:6px}
  .mg-plat-card p{display:none}
  .mg-plat-card h3{font-size:15px}
  .mg-plat-card b{font-size:12px;margin-top:2px}
}

/* --- Cómo funciona: 3 pasos en lista corta (antes 1.160 px) -------------- */
@media (max-width:859px){
  .mg-steps{gap:10px}
  .mg-step{flex-direction:row;align-items:flex-start;gap:14px;padding:16px 16px 16px 14px}
  .mg-step__n{flex:0 0 34px;height:34px;display:grid;place-items:center;padding:0;border:0;
    border-radius:50%;font-size:12px;color:#fff;background:linear-gradient(135deg,#2f6bff,#7d86ff,#a366ff)}
  .mg-step h3{font-size:15.5px;margin:0 0 3px}
  .mg-step p{font-size:13.5px;line-height:1.5;margin:0}
  .mg-step h3{margin-top:6px}
  .mg-step>div:not(.mg-step__n),.mg-step>h3,.mg-step>p{min-width:0}
  .mg-step h3,.mg-step p{grid-column:2}
  .mg-step{display:grid;grid-template-columns:34px 1fr;column-gap:14px}
  .mg-step__n{grid-row:1/3}
  .mg-trust{margin-top:22px;padding-top:20px;gap:14px 10px}
  .mg-trust b{font-size:22px}
}

/* --- Promo: título, precios y botón; menos aire ------------------------- */
@media (max-width:859px){
  .mg-promo{padding:22px 18px;gap:20px}
  .mg-promo h3{font-size:24px}
  .mg-promo p{margin-top:10px;font-size:14px}
  .mg-promo .mg-hero__cta{margin-top:18px!important;gap:10px}
  .mg-promo__row{padding:11px 0}
}

/* --- Producto: sin selector de cantidad (es digital), logos de pago ------ */
.mg-pdp .form-quantity,[data-component="product.quantity"]{display:none!important}
.mg-pay--logos{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:14px 0 18px;border:0!important;background:none!important;padding:0!important;box-shadow:none!important;border-radius:0}
.mg-pay--logos>span:first-child{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mg-ink-3)}
.mg-pay--logos img{height:20px;width:auto}
.mg-pay--logos img[alt="Bold"]{height:14px}
.mg-pay--logos .mg-pay__chip{height:24px;font-size:12px}