/* ==========================================================================
   MAGIVERCOL · REFERENCIAS — v7 (30 sep 2026) · se suma a referencias-v5.css · v7 = v6 sin el desborde lateral de 10 px del índice en celular
   Medido a 390 px antes del cambio: página de 18.000 px. Las 37 reseñas
   ocupaban 10.000 px seguidas; las pruebas más fuertes (Kevin paga la mitad,
   Zelda en la misma tarde) estaban al final, a 15.000 px; el índice ocupaba
   la primera pantalla; los iconos eran emojis.
   Arreglo (sin tocar el contenido del admin; todo por orden visual):
   1. Encabezado → resumen 5,0 ★ → garantías → historias reales → reseñas
      (6 visibles + botón "Ver las 37") → Facebook → deja tu reseña →
      WhatsApp → nota legal.
   2. Índice en celular = fila de chips deslizable, no una lista.
   3. Tarjetas con la misma profundidad y avatar de icono que el inicio.
   Lo complementa magivercol-referencias-v1.js (resumen, botón, iconos).
   ========================================================================== */
body.template-page .mg-info__body:has(.mg-refs){display:flex;flex-direction:column}
.mg-info__body:has(.mg-refs)>*{order:50}
.mg-info__body .mg-sec__head:has(#sec-1){order:1}
.mg-info__body .mg-refsum{order:2}
.mg-info__body:has(.mg-refs)>.mg-guarantee{order:3}
.mg-info__body .mg-sec__head:has(#sec-3){order:4}
.mg-info__body .mg-sec__head:has(#sec-3)+.mg-pasos{order:5}
.mg-info__body .mg-sec__head:has(#sec-4){order:6}
.mg-info__body .mg-sec__head:has(#sec-4)+.mg-pasos{order:7}
.mg-info__body .mg-refs-titulo{order:8}
.mg-info__body .mg-refs:not(:has(.mg-quote--fb)){order:9}
.mg-info__body .mg-refs-mas{order:10}
.mg-info__body .mg-sec__head:has(#sec-2){order:11}
.mg-info__body .mg-refs:has(.mg-quote--fb){order:12}
.mg-info__body .mg-sec__head:has(+.mg-embed){order:13}
.mg-info__body .mg-embed{order:14}
.mg-info__body .mg-sec__head:has(+.mg-legal){order:15}
.mg-info__body:has(.mg-refs)>.mg-cartnote{order:16}
.mg-info__body:has(.mg-refs)>.mg-legal{order:17}
/* índice en el mismo orden */
.mg-info:has(.mg-refs) .mg-info__index{display:flex;flex-direction:column}
.mg-info__index a[href="#sec-1"]{order:1}.mg-info__index a[href="#sec-3"]{order:2}
.mg-info__index a[href="#sec-4"]{order:3}.mg-info__index a[href="#sec-2"]{order:4}
.mg-info__index .js-mg-toc-cta{order:9}

/* --- Resumen 5,0 ★ --- */
.mg-refsum{display:flex;align-items:center;justify-content:center;gap:14px;margin:4px auto 22px;
  padding:14px 18px;border-radius:18px;background:#fff;border:1px solid rgba(125,134,255,.2);
  box-shadow:0 1px 2px rgba(17,17,19,.05),0 20px 40px -30px rgba(46,86,184,.4);max-width:360px}
.mg-refsum b{font-size:30px;font-weight:700;letter-spacing:-.03em;color:var(--mg-ink);line-height:1}
.mg-refsum__st{display:block;width:92px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 17'%3E%3Cg fill='%23F5B82E'%3E%3Cpath transform='translate(0 0)' 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%3Cpath transform='translate(19.8 0)' 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%3Cpath transform='translate(39.6 0)' 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%3Cpath transform='translate(59.4 0)' 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%3Cpath transform='translate(79.2 0)' 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/g%3E%3C/svg%3E") no-repeat left center/contain}
.mg-refsum span{font-size:13px;color:var(--mg-ink-2);line-height:1.35}

/* --- Garantías: iconos SVG en vez de emojis --- */
.mg-info__body .mg-guarantee strong{display:flex;align-items:center;gap:9px}
.mg-info__body .mg-guarantee strong::before{content:"";flex:0 0 26px;height:26px;border-radius:8px;
  background:#f1f1ff center/15px no-repeat}
.mg-info__body .mg-guarantee>div:nth-child(1) strong::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B5FD6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v4M12 17v4M3 12h4M17 12h4'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
.mg-info__body .mg-guarantee>div:nth-child(2) strong::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B5FD6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E")}
.mg-info__body .mg-guarantee>div:nth-child(3) strong::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B5FD6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E")}

/* --- Título que presenta las reseñas (lo inserta el JS) --- */
.mg-refs-titulo{text-align:center;margin:34px 0 18px}
.mg-refs-titulo .mg-kicker{display:block;margin-bottom:10px}

/* --- Tarjetas de reseña: mismo acabado que el inicio --- */
.mg-info__body .mg-refs:not(:has(.mg-quote--fb)) .mg-quote{
  background:linear-gradient(180deg,#fff 0%,#fafaff 100%);border-color:rgba(125,134,255,.2);
  box-shadow:0 1px 2px rgba(17,17,19,.05),0 22px 40px -30px rgba(46,86,184,.4)}
.mg-info__body .mg-quote .mg-avatar{
  width:38px;height:38px;flex:0 0 38px;border:2px solid transparent;border-radius:50%;color:transparent;font-size:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B5FD6' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='3.6'/%3E%3Cpath d='M4.8 19.5c1.2-3.3 3.9-5 7.2-5s6 1.7 7.2 5'/%3E%3C/svg%3E"),linear-gradient(#f4f4ff,#f4f4ff),linear-gradient(135deg,#2f6bff,#7d86ff,#a366ff);
  background-repeat:no-repeat;background-size:21px 21px,auto,auto;background-position:center,0 0,0 0;
  background-origin:padding-box,padding-box,border-box;background-clip:padding-box,padding-box,border-box}
/* reseñas ocultas hasta tocar "Ver todas" */
.mg-refs.is-corta>.mg-quote:nth-child(n+7){display:none}
.mg-refs-mas{display:flex;justify-content:center;margin:6px 0 10px}
.mg-refs-mas button{font:600 14px Montserrat,system-ui,sans-serif;min-height:46px;padding:0 22px;border-radius:99px;
  border:1px solid rgba(125,134,255,.35);background:#fff;color:var(--mg-ink);cursor:pointer;
  box-shadow:0 12px 26px -20px rgba(46,86,184,.5)}

/* --- Celular: índice como chips, menos aire arriba --- */
@media (max-width:859px){
  .mg-info:has(.mg-refs){margin-top:18px!important}
  .mg-info:has(.mg-refs) .mg-info__index{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:8px;
    margin:0 0 20px;padding:2px 0 6px;max-width:100%;scrollbar-width:none}
  .mg-info:has(.mg-refs) .mg-info__index::-webkit-scrollbar{display:none}
  .mg-info:has(.mg-refs) .mg-info__index a:not(.js-mg-toc-cta){flex:0 0 auto;white-space:nowrap;
    padding:9px 14px;border-radius:99px;font-size:13px;border:1px solid var(--mg-line);background:#fff}
  .mg-info:has(.mg-refs) .mg-info__index .js-mg-toc-cta{display:none}
  .mg-info__body:has(.mg-refs) .mg-guarantee{gap:8px}
  .mg-info__body:has(.mg-refs) .mg-guarantee>div{padding:14px 16px}
}