/* ==========================================================================
   MAGIVERCOL DESIGN SYSTEM V6 · REFERENCIAS — v4 (2 ago 2026)

   ALCANCE ACOTADO A PROPÓSITO.

   Medido en producción antes de escribir esto:

   - La cabecera y el pie de la página YA son V6. No se tocan.
   - El envoltorio `.mg-info` / `.mg-info__body` YA es V6. No se toca.
   - Los colores ajenos (#2DD4FF, #EC4899, #FBBF24, #1E293B, #101826,
     #E2E8F0, #94A3B8) NO vienen del tema: están escritos como
     `style="..."` en el HTML pegado en el editor del administrador
     (119 elementos con paleta ajena, 238 usos de color, dentro de
     `.mg-info__body`). Por eso NO se corrigen desde aquí: se corrigen
     reemplazando ese HTML por el preparado en
     `referencias-contenido-v6.html`.

   Este archivo solo aporta lo que el Design System V6 todavía no tenía
   y que ese HTML nuevo necesita: la rejilla de referencias, la ficha de
   autor de una cita, el marco de un incrustado externo y el pie legal.
   No redefine ninguna clase existente del sistema.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Rejilla de referencias
   842px de columna útil en escritorio => 2 fichas de 411px.
   -------------------------------------------------------------------------- */
body.mg .mg-refs{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}

/* --------------------------------------------------------------------------
   2 · Ficha de autor dentro de .mg-quote
   `.mg-quote figcaption` ya existe (flex, gap 11px, margin-top auto);
   esto solo apila el nombre y el contexto de compra.
   -------------------------------------------------------------------------- */
body.mg .mg-quote__who{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
/* Se usa `strong` y no `b`, y el contexto lleva clase propia, porque el editor
   del administrador (TinyMCE 5.10) convierte `<b>` en `<strong>` y BORRA los
   `<span>` sin atributos. Medido el 2 ago 2026 antes de guardar. */
body.mg .mg-quote__who strong{
  font-size:13.5px;
  font-weight:700;
  letter-spacing:-.012em;
  color:var(--mg-ink);
}
body.mg .mg-quote__who .mg-quote__ctx{
  font-size:11.5px;
  line-height:1.4;
  /* --mg-ink-3 (#9A9AA0) daba 2,80:1 sobre blanco: no cumple AA.
     --mg-ink-2 (#6E6E73) da 5,07:1. Medido en produccion el 2 ago 2026. */
  color:var(--mg-ink-2);
  overflow-wrap:anywhere;
}

/* Mismo motivo en el bloque de garantías: el sistema define `.mg-guarantee b`
   y `.mg-guarantee span`, que ya no existen tras la sanitización. */
body.mg .mg-guarantee strong{
  font-size:12.5px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--mg-ink);
}
body.mg .mg-guarantee .mg-guarantee__d{
  font-size:11.5px;
  line-height:1.45;
  color:var(--mg-ink-2);   /* mismo motivo de contraste */
}

/* La etiqueta de la referencia no se estira al ancho de la ficha. */
body.mg .mg-quote > .mg-badge{
  align-self:flex-start;
}

/* El pie de la ficha va en un div con clase, no en <figcaption>: el servidor
   de Tiendanube ELIMINA <figure> y <figcaption> al guardar la pagina.
   Medido en produccion el 2 ago 2026. Reemplaza a `.mg-quote figcaption`. */
body.mg .mg-quote__pie{
  display:flex;
  align-items:center;
  gap:11px;
  margin-top:auto;
}

/* --------------------------------------------------------------------------
   3 · Marco de contenido incrustado (formulario de Google)
   El interior es de otro dominio y no se puede reestilizar: lo único
   correcto es enmarcarlo con el radio y el borde del sistema.
   -------------------------------------------------------------------------- */
body.mg .mg-embed{
  border:1px solid var(--mg-line);
  border-radius:var(--mg-r-card);
  overflow:hidden;
  background:#fff;
  box-shadow:var(--mg-sh-card);
}
body.mg .mg-embed iframe{
  display:block;
  width:100%;
  border:0;
}

/* --------------------------------------------------------------------------
   4 · Pie legal
   Sustituye al gris #94A3B8 (contraste 2,6:1 sobre blanco, insuficiente)
   por --mg-ink-2 #6E6E73 (5,3:1, cumple AA).
   -------------------------------------------------------------------------- */
body.mg .mg-info__body p.mg-legal{
  font-size:12.5px;
  line-height:1.6;
  color:var(--mg-ink-2);
  max-width:70ch;
}

/* Los botones del cuerpo no llevan el subrayado de enlace del tema. */
body.mg .mg-info__body a.mg-btn{
  text-decoration:none;
}

/* --------------------------------------------------------------------------
   5 · Responsive
   -------------------------------------------------------------------------- */
@media (max-width:859px){
  body.mg .mg-refs{grid-template-columns:1fr}
}