/* ==========================================================================
   MAGIVERCOL · RESEÑAS DEL INICIO — v4 (29 sep 2026) · = v3 + avatar con icono de usuario en vez de iniciales (pedido de Miguel)
   Por qué: en el celular (90 % del tráfico) la sección "Lo que dicen quienes ya
   compraron" era una pila de 3 tarjetas blancas planas de ~440 px cada una:
   sin profundidad, estrellas en texto y más de 1.300 px de scroll.
   Arreglo (refinar, no rediseñar — mismo copy, mismos testimonios):
   - Celular: carrusel horizontal con snap; se asoma la siguiente tarjeta.
   - Tarjetas con sombra suave desplazada, borde lila tenue y comilla de marca.
   - Estrellas dibujadas en SVG (antes glifos ★ de texto).
   - Avatar con aro del degradado de marca.
   Solo aplica en el inicio (body.template-home). /referencias no se toca.
   ========================================================================== */

body.template-home .mg-quotes{gap:18px}

body.template-home .mg-quote{
  position:relative;
  background:linear-gradient(180deg,#fff 0%,#fafaff 100%);
  border-color:rgba(125,134,255,.20);
  box-shadow:0 1px 2px rgba(17,17,19,.05),0 24px 44px -30px rgba(46,86,184,.42);
  gap:18px;
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s cubic-bezier(.16,1,.3,1);
}
@media (hover:hover){
  body.template-home .mg-quote:hover{
    transform:translateY(-3px);
    box-shadow:0 2px 4px rgba(17,17,19,.05),0 32px 56px -30px rgba(46,86,184,.5);
  }
}

/* comilla grande de marca, arriba a la derecha */
body.template-home .mg-quote::before{
  content:"";position:absolute;top:20px;right:22px;width:42px;height:34px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 34'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%232f6bff'/%3E%3Cstop offset='.5' stop-color='%237d86ff'/%3E%3Cstop offset='1' stop-color='%23a366ff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M0 34V20C0 9 6 2 17 0l2 5c-6 2-9 6-9 11h8v18zm23 0V20C23 9 29 2 40 0l2 5c-6 2-9 6-9 11h8v18z'/%3E%3C/svg%3E") no-repeat center/contain;
  opacity:.22;
}

/* estrellas en SVG (se conserva el aria-label "5 de 5") */
body.template-home .mg-quote .mg-stars{
  display:block;width:96px;height:17px;font-size:0;letter-spacing:0;color:transparent;
  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;
}

body.template-home .mg-quote blockquote{font-size:15.5px;line-height:1.62;letter-spacing:-.005em}

body.template-home .mg-quote figcaption{padding-top:16px;border-top:1px solid rgba(125,134,255,.14)}
body.template-home .mg-quote .mg-avatar{
  width:40px;height:40px;flex:0 0 40px;border:2px solid transparent;
  background:linear-gradient(#f4f4ff,#f4f4ff) padding-box,linear-gradient(135deg,#2f6bff,#7d86ff,#a366ff) border-box;
  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:22px 22px,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;
}
body.template-home .mg-quote figcaption b{font-size:15px}

/* ---- Celular: carrusel deslizable ---- */
@media (max-width:899px){
  body.template-home .mg-quotes{
    display:flex;grid-template-columns:none;gap:12px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin:0 calc(-1 * var(--mg-gut,16px));
    padding:4px var(--mg-gut,16px) 42px;margin-bottom:-14px;scroll-padding:0 var(--mg-gut,16px);
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  body.template-home .mg-quotes::-webkit-scrollbar{display:none}
  body.template-home .mg-quote{flex:0 0 84%;scroll-snap-align:start;padding:22px 20px}
  /* las tarjetas fuera de pantalla no deben quedarse invisibles esperando el scroll vertical */
  body.template-home .mg-quotes .mg-reveal{opacity:1;transform:none}
  body.template-home .mg-quote::before{top:18px;right:18px;width:36px;height:29px}
}