/** Shopify CDN: Minification failed

Line 1393:24 Expected identifier but found whitespace
Line 1393:25 Unexpected "#000000"

**/
/* ==========================================================================
   mg-design-system.css — Sistema visual del Bisglicinato de Magnesio MAKILA
   --------------------------------------------------------------------------
   FUENTE ÚNICA DE VERDAD. Ningún componente MG define un color a mano: todos
   leen de aquí. Si un hex aparece suelto en una sección, es un error.

   Paleta cerrada de §5.2. Fondos permitidos, y solo estos: blanco, hielo,
   celeste visible, celeste vivo, cian de marca y cian fuerte.

   --------------------------------------------------------------------------
   CINCO COMBINACIONES DE §5.6 QUE NO LLEGAN A AA, Y CÓMO SE RESUELVEN
   --------------------------------------------------------------------------
   Medidas reales, no estimaciones:

     blanco sobre #35B9E5 ................. 2,28:1   ✗
     blanco sobre #169FCD ................. 3,05:1   ✗ (texto normal)
     #416673 sobre #69D2ED ................ 3,57:1   ✗
     #6B8791 como texto sobre blanco ...... 3,82:1   ✗
     #E4B84C como texto sobre blanco ...... 1,87:1   ✗

   Se resuelven SIN salir de la paleta:

   1. Barra superior y marquee → fondo `--mg-cyan-accessible` (#087EA5), que da
      4,63:1 con blanco. El propio §5.3 lo reserva para «una franja pequeña que
      necesite texto blanco con mejor contraste»: es exactamente este caso.
   2. Pie de página → mismo #087EA5, por la misma razón: sus enlaces son texto
      normal y con #169FCD se quedarían en 3,05:1.
   3. Secciones de cian y celeste vivo → el texto va en TINTA, no en blanco.
      #143B49 sobre #35B9E5 da 5,27:1 y sobre #69D2ED da 6,88:1. §5.7 prohíbe
      «texto oscuro ilegible sobre cian»; esto no es ilegible, es lo legible.
   4. `--mg-muted` no se usa nunca como color de texto: bordes e iconos.
   5. `--mg-gold` no se usa nunca como texto: solo estrellas reales y acentos
      sobre fondo claro.
   ========================================================================== */

:root {
  /* ---- Paleta cerrada (§5.2) -------------------------------------------- */
  --mg-white: #ffffff;
  --mg-ice: #f4fbfd;
  --mg-sky-light: #b9eaf5;
  --mg-sky: #69d2ed;
  --mg-cyan: #35b9e5;
  --mg-cyan-strong: #169fcd;
  --mg-cyan-accessible: #087ea5;

  --mg-ink: #143b49; /* TEXTO. Nunca fondo. */
  --mg-body: #416673; /* TEXTO. Nunca fondo. */
  --mg-muted: #6b8791; /* bordes e iconos, nunca texto */
  --mg-border: #a8d9e6;

  --mg-trust: #27865f;
  --mg-gold: #e4b84c;
  --mg-error: #b94141;

  /* ---- Ritmo. Base 4px. ------------------------------------------------- */
  --mg-s1: 4px;
  --mg-s2: 8px;
  --mg-s3: 12px;
  --mg-s4: 16px;
  --mg-s5: 24px;
  --mg-s6: 32px;
  --mg-s7: 48px;
  --mg-s8: 64px;
  --mg-s9: 88px;

  /* ---- Superficies ------------------------------------------------------ */
  --mg-radio: 18px;
  --mg-radio-sm: 12px;
  --mg-radio-btn: 12px;
  --mg-wrap: 1200px;
  --mg-wrap-sm: 760px;

  /* Sombras CELESTES, nunca negras (§17 prohíbe sombras negras grandes). */
  --mg-sombra: 0 1px 2px rgba(8, 126, 165, 0.06), 0 8px 24px rgba(8, 126, 165, 0.08);
  --mg-sombra-alta: 0 2px 6px rgba(8, 126, 165, 0.1), 0 16px 40px rgba(8, 126, 165, 0.14);

  --mg-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   Reglas estructurales de §16.2. Van primero porque son las que evitan el
   desbordamiento horizontal en 320–430 px.
   ========================================================================== */

.mg *,
.mg *::before,
.mg *::after {
  box-sizing: border-box;
}

/* Sin esto, un hijo de rejilla o de flex no puede encogerse por debajo de su
   ancho mínimo de contenido y empuja la página hacia los lados. Es la causa
   número uno del scroll horizontal en móvil. */
.mg-grid > *,
.mg-flex > *,
.mg-seccion__interior,
.mg-wrap > * {
  min-width: 0;
}

.mg img,
.mg svg,
.mg video {
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   Tipografía (§7) — Montserrat, del selector de Shopify
   ========================================================================== */

.mg {
  font-family: var(--mg-font, var(--font-body-family, 'Montserrat', sans-serif));
  color: var(--mg-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Dawn fija `color` en h1–h6, así que sin esto los títulos no heredan el color
   del tema de la sección. */
.mg :is(h1, h2, h3, h4, h5, h6) {
  font-family: inherit;
  color: var(--tema-titulo, var(--mg-ink));
  margin: 0;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.mg-h1 {
  font-weight: 700;
  font-size: clamp(34px, 5.2vw, 56px);
  line-height: 1.08;
}

.mg-h2 {
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.12;
}

.mg-h3 {
  font-weight: 600;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.28;
}

.mg-p,
.mg p {
  margin: 0;
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.6;
  color: var(--tema-cuerpo, var(--mg-body));
}

.mg-lead {
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.6;
  color: var(--tema-cuerpo, var(--mg-body));
  max-width: 62ch;
}

.mg-sm {
  font-size: 15px;
  line-height: 1.55;
  color: var(--tema-cuerpo, var(--mg-body));
}

.mg-nota {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--tema-cuerpo, var(--mg-body));
}

/* Eyebrow: 700, mayúsculas moderadas. */
.mg-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tema-eyebrow, var(--mg-cyan-accessible));
}

/* ==========================================================================
   LOS CINCO TEMAS DE FONDO (§5.7)
   --------------------------------------------------------------------------
   Una clase por sección decide fondo, títulos, cuerpo, tarjetas, bordes,
   iconos y botones a la vez. Es imposible dejar texto blanco sobre blanco
   porque los tokens viajan juntos.
   ========================================================================== */

.mg-seccion {
  position: relative;
  background: var(--tema-fondo);
  color: var(--tema-cuerpo);
  padding-block: var(--mg-pad-y, clamp(48px, 7vw, 88px));
}

.mg-seccion--blanco {
  --tema-fondo: var(--mg-white);
  --tema-titulo: var(--mg-ink);
  --tema-cuerpo: var(--mg-body);
  --tema-eyebrow: var(--mg-cyan-accessible);
  --tema-borde: var(--mg-border);
  --tema-tarjeta: var(--mg-white);
  --tema-tarjeta-borde: var(--mg-border);
  --tema-icono: var(--mg-cyan-accessible);
  --tema-cta: var(--mg-cyan-accessible);
  --tema-cta-texto: var(--mg-white);
  --tema-cta-hover: var(--mg-cyan-strong);
}

.mg-seccion--hielo {
  --tema-fondo: var(--mg-ice);
  --tema-titulo: var(--mg-ink);
  --tema-cuerpo: var(--mg-body);
  --tema-eyebrow: var(--mg-cyan-accessible);
  --tema-borde: var(--mg-border);
  --tema-tarjeta: var(--mg-white);
  --tema-tarjeta-borde: var(--mg-border);
  --tema-icono: var(--mg-cyan-accessible);
  --tema-cta: var(--mg-cyan-accessible);
  --tema-cta-texto: var(--mg-white);
  --tema-cta-hover: var(--mg-cyan-strong);
}

.mg-seccion--celeste {
  --tema-fondo: var(--mg-sky-light);
  --tema-titulo: var(--mg-ink);
  --tema-cuerpo: var(--mg-body);
  --tema-eyebrow: var(--mg-cyan-accessible);
  --tema-borde: #8fcfe0;
  --tema-tarjeta: var(--mg-white);
  --tema-tarjeta-borde: var(--mg-white);
  --tema-icono: var(--mg-cyan-accessible);
  --tema-cta: var(--mg-cyan-accessible);
  --tema-cta-texto: var(--mg-white);
  --tema-cta-hover: var(--mg-cyan-strong);
}

/* Celeste vivo y cian: el CUERPO pasa a tinta. `--mg-body` sobre #69D2ED se
   queda en 3,57:1 y no llega. La tinta da 6,88:1. */
.mg-seccion--vivo {
  --tema-fondo: var(--mg-sky);
  --tema-titulo: var(--mg-ink);
  --tema-cuerpo: var(--mg-ink);
  --tema-eyebrow: var(--mg-ink);
  --tema-borde: rgba(20, 59, 73, 0.22);
  --tema-tarjeta: var(--mg-white);
  --tema-tarjeta-borde: var(--mg-white);
  --tema-icono: var(--mg-cyan-accessible);
  --tema-cta: var(--mg-cyan-accessible);
  --tema-cta-texto: var(--mg-white);
  --tema-cta-hover: var(--mg-ink);
}

.mg-seccion--cian {
  --tema-fondo: var(--mg-cyan);
  --tema-titulo: var(--mg-ink);
  --tema-cuerpo: var(--mg-ink);
  --tema-eyebrow: var(--mg-ink);
  --tema-borde: rgba(20, 59, 73, 0.24);
  --tema-tarjeta: var(--mg-white);
  --tema-tarjeta-borde: var(--mg-white);
  --tema-icono: var(--mg-cyan-accessible);
  --tema-cta: var(--mg-white);
  --tema-cta-texto: var(--mg-cyan-accessible);
  --tema-cta-hover: var(--mg-ice);
}

/* Las tarjetas sobre celeste vivo y cian son blancas con texto oscuro, como
   pide §5.6. Dentro de una tarjeta, el cuerpo vuelve a su gris azulado. */
.mg-seccion--vivo .mg-card,
.mg-seccion--cian .mg-card {
  --tema-cuerpo: var(--mg-body);
}

/* ==========================================================================
   Envoltorios y cabeceras
   ========================================================================== */

.mg-wrap {
  width: 100%;
  max-width: var(--mg-wrap);
  margin-inline: auto;
  /* §16.2: 16–20 px de aire lateral en móvil. */
  padding-inline: clamp(16px, 4vw, 40px);
}

.mg-wrap--sm {
  max-width: var(--mg-wrap-sm);
}

.mg-head {
  display: grid;
  gap: var(--mg-s3);
  max-width: 720px;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.mg-head--c {
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}

/* ==========================================================================
   Tarjetas
   ========================================================================== */

.mg-card {
  background: var(--tema-tarjeta);
  border: 1px solid var(--tema-tarjeta-borde);
  border-radius: var(--mg-radio);
  padding: clamp(20px, 3vw, 28px);
  color: var(--tema-cuerpo);
  box-shadow: var(--mg-sombra);
  min-width: 0;
}

.mg-card :is(h2, h3, h4) {
  color: var(--mg-ink);
}

.mg-card--hover {
  transition: transform 220ms var(--mg-ease), box-shadow 220ms var(--mg-ease);
}

.mg-card--hover:hover {
  /* §17: como mucho 2 px. Nada de rebotes. */
  transform: translateY(-2px);
  box-shadow: var(--mg-sombra-alta);
}

/* ==========================================================================
   Botones — 48px mínimo, ancho completo en móvil
   ========================================================================== */

.mg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mg-s2);
  min-height: 52px;
  padding: 14px 26px;
  border: 0;
  border-radius: var(--mg-radio-btn);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  /* §16.2: nada de nowrap en botones con texto largo. */
  white-space: normal;
  transition: background-color 200ms var(--mg-ease), box-shadow 200ms var(--mg-ease);
}

.mg-btn--p {
  background: var(--tema-cta, var(--mg-cyan-accessible));
  color: var(--tema-cta-texto, var(--mg-white));
  box-shadow: var(--mg-sombra);
}

.mg-btn--p:hover {
  background: var(--tema-cta-hover, var(--mg-cyan-strong));
  box-shadow: var(--mg-sombra-alta);
}

.mg-btn--s {
  background: transparent;
  color: var(--tema-titulo, var(--mg-ink));
  border: 1.5px solid var(--tema-borde, var(--mg-border));
}

.mg-btn--full {
  width: 100%;
}

.mg-btn:focus-visible,
.mg a:focus-visible,
.mg button:focus-visible,
.mg input:focus-visible,
.mg summary:focus-visible {
  outline: 3px solid var(--mg-cyan-accessible);
  outline-offset: 2px;
  border-radius: 6px;
}

@media screen and (max-width: 749px) {
  .mg-btn {
    width: 100%;
  }
}

/* ==========================================================================
   Listas de comprobación — el check verde solo cuando es un dato real
   ========================================================================== */

.mg-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--mg-s3);
}

.mg-checks li {
  position: relative;
  padding-left: 30px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--tema-cuerpo);
}

.mg-checks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--mg-trust);
}

.mg-checks li::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 8px;
  width: 8px;
  height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

/* ==========================================================================
   Etiquetas y píldoras
   ========================================================================== */

.mg-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--mg-white);
  color: var(--mg-cyan-accessible);
  border: 1px solid var(--tema-borde, var(--mg-border));
}

.mg-tag--solida {
  background: var(--mg-cyan-accessible);
  color: var(--mg-white);
  border-color: transparent;
}

/* ==========================================================================
   Iconos
   ========================================================================== */

.mg-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--mg-ice);
  color: var(--tema-icono, var(--mg-cyan-accessible));
  flex: none;
}

.mg-seccion--vivo .mg-ico,
.mg-seccion--cian .mg-ico {
  background: var(--mg-white);
}

.mg-ico svg {
  width: 22px;
  height: 22px;
}

/* ==========================================================================
   Acordeones — el sitio donde vive el detalle técnico (§8.2)
   ========================================================================== */

.mg-acc {
  border-top: 1px solid var(--tema-borde, var(--mg-border));
}

.mg-acc__item {
  border-bottom: 1px solid var(--tema-borde, var(--mg-border));
}

.mg-acc__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mg-s4);
  /* Área táctil holgada: §16.2 pide 44 px como mínimo. */
  min-height: 56px;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  font-weight: 600;
  color: var(--tema-titulo, var(--mg-ink));
}

.mg-acc__q::-webkit-details-marker {
  display: none;
}

.mg-acc__ico {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--tema-icono, var(--mg-cyan-accessible));
  transition: transform 220ms var(--mg-ease);
}

.mg-acc__item[open] .mg-acc__ico {
  transform: rotate(45deg);
}

.mg-acc__a {
  padding-bottom: 20px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--tema-cuerpo);
  max-width: 68ch;
}

/* ==========================================================================
   Revelado por scroll (§17) — opacity + translateY, 350–500 ms
   ========================================================================== */

.mg-rev {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 420ms var(--mg-ease), transform 420ms var(--mg-ease);
  transition-delay: var(--mg-delay, 0ms);
}

.mg-rev.is-in {
  opacity: 1;
  transform: none;
}

/* Si el JS no llega a ejecutarse, el contenido NO puede quedarse invisible. */
.no-js .mg-rev,
.mg-rev.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .mg *,
  .mg *::before,
  .mg *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .mg-rev {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   Utilidades
   ========================================================================== */

.mg-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Aviso que SOLO se ve en el editor de Shopify. */
.mg-hint {
  padding: 16px 18px;
  border: 1px dashed var(--mg-cyan-accessible);
  border-radius: var(--mg-radio-sm);
  background: var(--mg-ice);
  color: var(--mg-ink);
  font-size: 14px;
  line-height: 1.5;
}

/* ==========================================================================
   PUENTE CON EL VOCABULARIO ANTERIOR
   --------------------------------------------------------------------------
   Las diecinueve secciones ya escritas usan `mg-b-*` y `mg-band--*`, heredados
   del tema del aceite. En vez de reescribirlas una a una —y arriesgarse a
   romper el enganche de Releasit o la galería—, cada clase vieja se reasigna a
   uno de los cinco temas permitidos.

   El efecto inmediato es que DESAPARECE TODO FONDO OSCURO: las clases que antes
   pintaban azul petróleo o verde profundo ahora pintan cian y celeste vivo.
   Ningún selector de aquí produce un fondo fuera de §5.3.
   ========================================================================== */

.mg-sec,
.mg-pdp {
  position: relative;
  background: var(--tema-fondo);
  color: var(--tema-cuerpo);
  padding-top: var(--mg-pad-top, 72px);
  padding-bottom: var(--mg-pad-bottom, 72px);
}

/* blanco */
.mg-b-blanco,
.mg-band--bone,
.mg-pdp {
  --tema-fondo: var(--mg-white);
  --tema-titulo: var(--mg-ink);
  --tema-cuerpo: var(--mg-body);
  --tema-eyebrow: var(--mg-cyan-accessible);
  --tema-borde: var(--mg-border);
  --tema-tarjeta: var(--mg-white);
  --tema-tarjeta-borde: var(--mg-border);
  --tema-icono: var(--mg-cyan-accessible);
  --tema-cta: var(--mg-cyan-accessible);
  --tema-cta-texto: var(--mg-white);
  --tema-cta-hover: var(--mg-cyan-strong);
}

/* hielo */
.mg-b-niebla,
.mg-band--hielo {
  --tema-fondo: var(--mg-ice);
  --tema-titulo: var(--mg-ink);
  --tema-cuerpo: var(--mg-body);
  --tema-eyebrow: var(--mg-cyan-accessible);
  --tema-borde: var(--mg-border);
  --tema-tarjeta: var(--mg-white);
  --tema-tarjeta-borde: var(--mg-border);
  --tema-icono: var(--mg-cyan-accessible);
  --tema-cta: var(--mg-cyan-accessible);
  --tema-cta-texto: var(--mg-white);
  --tema-cta-hover: var(--mg-cyan-strong);
}

/* celeste visible */
.mg-b-celeste,
.mg-band--crema {
  --tema-fondo: var(--mg-sky-light);
  --tema-titulo: var(--mg-ink);
  --tema-cuerpo: var(--mg-body);
  --tema-eyebrow: var(--mg-cyan-accessible);
  --tema-borde: #8fcfe0;
  --tema-tarjeta: var(--mg-white);
  --tema-tarjeta-borde: var(--mg-white);
  --tema-icono: var(--mg-cyan-accessible);
  --tema-cta: var(--mg-cyan-accessible);
  --tema-cta-texto: var(--mg-white);
  --tema-cta-hover: var(--mg-cyan-strong);
}

/* celeste vivo — antes era el verde profundo */
.mg-b-verde,
.mg-band--dark {
  --tema-fondo: var(--mg-sky);
  --tema-titulo: var(--mg-ink);
  --tema-cuerpo: var(--mg-ink);
  --tema-eyebrow: var(--mg-ink);
  --tema-borde: rgba(20, 59, 73, 0.22);
  --tema-tarjeta: var(--mg-white);
  --tema-tarjeta-borde: var(--mg-white);
  --tema-icono: var(--mg-cyan-accessible);
  --tema-cta: var(--mg-cyan-accessible);
  --tema-cta-texto: var(--mg-white);
  --tema-cta-hover: var(--mg-ink);
}

/* cian de marca — antes era el azul petróleo */
.mg-b-osc,
.mg-b-carbon,
.mg-band--deep {
  --tema-fondo: var(--mg-cyan);
  --tema-titulo: var(--mg-ink);
  --tema-cuerpo: var(--mg-ink);
  --tema-eyebrow: var(--mg-ink);
  --tema-borde: rgba(20, 59, 73, 0.24);
  --tema-tarjeta: var(--mg-white);
  --tema-tarjeta-borde: var(--mg-white);
  --tema-icono: var(--mg-cyan-accessible);
  --tema-cta: var(--mg-white);
  --tema-cta-texto: var(--mg-cyan-accessible);
  --tema-cta-hover: var(--mg-ice);
}

/* Dentro de una tarjeta blanca el cuerpo vuelve a su gris azulado. */
.mg-b-verde .mg-card,
.mg-b-osc .mg-card,
.mg-band--dark .mg-card,
.mg-band--deep .mg-card {
  --tema-cuerpo: var(--mg-body);
}

/* Ninguna banda pinta ya un degradado: solo color plano de la paleta. */
.mg-sec,
.mg-b-blanco,
.mg-b-niebla,
.mg-b-celeste,
.mg-b-verde,
.mg-b-osc,
.mg-b-carbon,
.mg-band--bone,
.mg-band--crema,
.mg-band--dark,
.mg-band--deep,
.mg-halo,
.mg-band--halo {
  background-image: none;
}

/* El adorno decorativo, en celeste y muy tenue. */
.mg-burbuja {
  background: rgba(53, 185, 229, 0.14);
}

/* Vocabulario de texto heredado. */
.mg-d1 { font-weight: 700; font-size: clamp(34px, 5.2vw, 56px); line-height: 1.08; }
.mg-display { font-weight: 700; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.1; }
.mg-label { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tema-eyebrow, var(--mg-cyan-accessible)); }
.mg-note, .mg-small, .mg-xs { font-size: 13.5px; line-height: 1.5; color: var(--tema-cuerpo); }

/* --------------------------------------------------------------------------
   El buscador plegado de Dawn desbordaba a 320 px
   --------------------------------------------------------------------------
   `.search__input` lleva `min-width: 72px` y un ancho propio de 113 px, pero
   vive dentro de un `.field` de ancho CERO mientras el modal está plegado. El
   input se salía 41 px y empujaba la página: era el único nodo que rompía la
   comprobación de §16.3 en toda la tienda.

   `overflow: clip` en el formulario lo contiene. Cuando el modal se abre, el
   formulario sí tiene ancho real y el recorte no hace nada, así que el buscador
   sigue funcionando igual. Se usa `clip` y no `hidden` a propósito: `hidden`
   crearía un contenedor de desplazamiento y rompería el `sticky` de la galería.
   -------------------------------------------------------------------------- */
body.mg-pagina .search-modal__form {
  overflow: clip;
}

body.mg-pagina .search-modal__form .field,
body.mg-pagina .search__input {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Marquee — fondo sólido de la paleta, texto blanco
   -------------------------------------------------------------------------- */
.mg-marq {
  background: var(--mg-marq-bg, var(--mg-cyan-accessible));
  background-image: none;
  color: var(--mg-white);
  overflow: hidden;
}

.mg-marq :is(li, span, p) {
  color: var(--mg-white);
}

.mg-marq__punto {
  background: rgba(255, 255, 255, 0.55);
}

/* --------------------------------------------------------------------------
   El grupo de cabecera, recortado en horizontal
   --------------------------------------------------------------------------
   Contiene el buscador plegado de Dawn, que a 320 px sobresalía 41 px. Recortar
   el formulario no bastó porque el input cuelga de un ancestro posicionado.

   `clip` y no `hidden`: `hidden` convertiría la cabecera en un contenedor de
   desplazamiento y rompería el `position: sticky` de la galería del producto.
   Recortar solo en horizontal deja intacto el desplegable del menú móvil, que
   crece hacia abajo.
   -------------------------------------------------------------------------- */
body.mg-pagina .shopify-section-group-header-group {
  overflow-x: clip;
}

/* --------------------------------------------------------------------------
   Últimos fondos fuera de paleta
   --------------------------------------------------------------------------
   El cierre heredaba una regla de una ronda anterior que lo pintaba en
   #153B4A, y el pie usaba un #0C6B8E que no está en la lista de §5.3. Los dos
   pasan al cian accesible, que es el único tono oscuro que la paleta autoriza
   para franjas con texto blanco.
   -------------------------------------------------------------------------- */
body.mg-pagina .mg-band--deep,
body.mg-pagina .mg-b-osc {
  background: var(--mg-cyan) !important;
  background-image: none !important;
  --tema-fondo: var(--mg-cyan);
  --tema-titulo: var(--mg-ink);
  --tema-cuerpo: var(--mg-ink);
  --tema-cta: var(--mg-white);
  --tema-cta-texto: var(--mg-cyan-accessible);
}

body.mg-pagina .mg-pie {
  --mg-pie-bg: var(--mg-cyan-accessible);
  --mg-pie-base: var(--mg-cyan-accessible);
  background: var(--mg-cyan-accessible) !important;
  background-image: none !important;
  color: var(--mg-white);
}

/* Sin franja inferior distinta: el pie es de un solo color (§10). */
body.mg-pagina .mg-pie__base {
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
}

body.mg-pagina .mg-pie__halo {
  display: none;
}

/* El recorte tiene que alcanzar al envoltorio del encabezado, no solo al
   grupo: el buscador plegado cuelga de ahí. */
body.mg-pagina .header-wrapper,
body.mg-pagina .section-header {
  overflow-x: clip;
}

/* El campo del buscador, fluido. Tenía `width: 113px` y `min-width: 72px`
   dentro de un contenedor plegado de ancho cero, así que sobresalía 56 px a
   320 px. Recortar la cabecera no bastaba: el modal es `absolute` y su bloque
   contenedor está más arriba, fuera del recorte.

   Con ancho fluido, plegado mide cero y abierto ocupa lo que le den. Es además
   el comportamiento correcto de un campo de búsqueda. */
body.mg-pagina .search__input,
body.mg-pagina .search-modal__form .field__input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   Releasit — devolver lo que otra hoja le estaba ocultando
   --------------------------------------------------------------------------
   `nv-releasit-fix.css`, del masajeador, oculta con `display: none !important`
   los esqueletos de carga de Releasit (`[data-btn-skel]`, `.rsi-qty-skel`).
   Se carga en toda la tienda, así que también afectaba a esta página. §15 lo
   prohíbe expresamente: sin sus esqueletos, la app puede quedarse a medias al
   inicializar.

   No se toca ese archivo, que es del otro producto: se revierte solo aquí.
   -------------------------------------------------------------------------- */
body.mg-pagina #rsi-button-hook > [data-btn-skel],
body.mg-pagina #rsi-button-hook .rsi-qty-skel,
body.mg-pagina #rsi-button-hook .rsi-qty-skel-item {
  display: revert !important;
}

/* Y ninguna regla de este tema oculta el botón ni el formulario de la app. */
body.mg-pagina #rsi-button-hook,
body.mg-pagina .rsi-button-hook,
body.mg-pagina .rsi-buy-now-button,
body.mg-pagina #rsi_form_wrapper {
  display: revert;
  visibility: visible;
}

/* Sin galería, la ficha pasa a una sola columna en escritorio: no puede quedar
   media pantalla vacía esperando una foto que aún no existe. */
body.mg-pagina .mg-pdp__grid:not(:has(.mg-pdp__media)) {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: 'intro' 'compra' !important;
  max-width: 720px;
}

/* ==========================================================================
   AJUSTES ESTÉTICOS — botón luminoso, pie claro, cian fuerte
   --------------------------------------------------------------------------
   EL BOTÓN. El #087EA5 se veía apagado. Se probaron todos los azules más
   claros y NINGUNO aguanta texto blanco en AA:

     #0A88B2 → 4,06    #0C93C0 → 3,53    #169FCD → 3,05

   Así que el botón pasa a CIAN LUMINOSO con texto TINTA: 5,27:1, pasa de
   sobra y se ve mucho más vivo. Es la misma solución que usan las marcas de
   bienestar con paleta cian.
   ========================================================================== */

.mg .mg-btn--p,
.mg-btn--p {
  background: var(--mg-cyan);
  background-image: none;
  color: var(--mg-ink);
  font-weight: 700;
  box-shadow: 0 2px 4px rgba(8, 126, 165, 0.12), 0 10px 24px rgba(8, 126, 165, 0.18);
}

.mg .mg-btn--p:hover,
.mg-btn--p:hover {
  background: #4fc5ea;
  color: var(--mg-ink);
  box-shadow: 0 4px 8px rgba(8, 126, 165, 0.16), 0 16px 34px rgba(8, 126, 165, 0.24);
}

/* Sobre fondo cian el botón se perdería: allí va blanco con texto cian. */
.mg-seccion--cian .mg-btn--p,
.mg-b-osc .mg-btn--p,
.mg-band--deep .mg-btn--p {
  background: var(--mg-white);
  color: var(--mg-cyan-accessible);
}

.mg-seccion--cian .mg-btn--p:hover,
.mg-b-osc .mg-btn--p:hover,
.mg-band--deep .mg-btn--p:hover {
  background: var(--mg-ice);
}

/* El botón del formulario de recordatorio, igual que el resto. */
.mg-subscription button {
  background: var(--mg-cyan) !important;
  color: var(--mg-ink) !important;
}

.mg-subscription button:hover {
  background: #4fc5ea !important;
}

/* --------------------------------------------------------------------------
   TEMA «CIAN FUERTE» — el único con texto blanco
   --------------------------------------------------------------------------
   Marco pedía texto blanco en algunas secciones. Sobre celeste vivo el blanco
   da 1,7:1 y es ilegible. Sobre #087EA5 da 4,63:1 y sí. Este tema existe para
   esos bloques: fondo cian profundo, todo el texto en blanco y las tarjetas
   blancas con texto tinta.
   -------------------------------------------------------------------------- */
.mg-seccion--cianfuerte {
  --tema-fondo: var(--mg-cyan-accessible);
  --tema-titulo: var(--mg-white);
  --tema-cuerpo: var(--mg-white);
  --tema-eyebrow: var(--mg-white);
  --tema-borde: rgba(255, 255, 255, 0.3);
  --tema-tarjeta: var(--mg-white);
  --tema-tarjeta-borde: var(--mg-white);
  --tema-icono: var(--mg-white);
  --tema-cta: var(--mg-cyan);
  --tema-cta-texto: var(--mg-ink);
  --tema-cta-hover: #4fc5ea;
}

.mg-seccion--cianfuerte .mg-card {
  --tema-cuerpo: var(--mg-body);
  --tema-titulo: var(--mg-ink);
}

.mg-seccion--cianfuerte .mg-subscription__label {
  color: var(--mg-white);
}

/* --------------------------------------------------------------------------
   EL PIE, CLARO
   --------------------------------------------------------------------------
   Estaba en cian profundo con texto blanco y Marco lo quería claro. Pasa a
   celeste visible con texto tinta: 9,22:1 en títulos y 4,79:1 en el cuerpo.
   Las tarjetas de confianza pasan a blancas.
   -------------------------------------------------------------------------- */
body.mg-pagina .mg-pie {
  --mg-pie-bg: var(--mg-sky-light);
  --mg-pie-base: var(--mg-sky-light);
  background: var(--mg-sky-light) !important;
  background-image: none !important;
  color: var(--mg-body);
}

body.mg-pagina .mg-pie :is(h2, h3, h4, .mg-pie__wordmark) {
  color: var(--mg-ink);
}

body.mg-pagina .mg-pie :is(p, li, a, span) {
  color: var(--mg-body);
}

body.mg-pagina .mg-pie a:hover {
  color: var(--mg-cyan-accessible);
}

body.mg-pagina .mg-pie__conf {
  background: var(--mg-white);
  border: 1px solid var(--mg-border);
  color: var(--mg-ink);
}

body.mg-pagina .mg-pie__conf-ico {
  background: var(--mg-ice);
  color: var(--mg-cyan-accessible);
}

body.mg-pagina .mg-pie__regla {
  background: var(--mg-cyan-accessible);
}

body.mg-pagina .mg-pie__base {
  background: transparent;
  border-top: 1px solid rgba(20, 59, 73, 0.16);
}

/* Áreas táctiles de 44 px en los enlaces del pie (§10). */
body.mg-pagina .mg-pie__legal a,
body.mg-pagina .mg-pie nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* --------------------------------------------------------------------------
   Tokens del sistema anterior que quedaron sueltos en alguna sección.
   Sin esto, un `var(--mg-azul-osc)` sin definir deja el texto en negro de
   Dawn, que es justo lo que la paleta prohíbe.
   -------------------------------------------------------------------------- */
body.mg-pagina {
  --mg-azul: var(--mg-cyan-accessible);
  --mg-azul-osc: var(--mg-ink);
  --mg-celeste: var(--mg-cyan);
  --mg-celeste-suave: var(--mg-sky-light);
  --mg-niebla: var(--mg-ice);
  --mg-texto: var(--mg-ink);
  --mg-texto-sec: var(--mg-body);
  --mg-texto-ter: var(--mg-body);
  --mg-borde: var(--mg-border);
  --mg-verde: var(--mg-trust);
  --mg-blanco: var(--mg-white);
  --mg-sobre-osc: var(--mg-white);
  --mg-sobre-osc-sec: var(--mg-ice);
  --mg-carbon: var(--mg-ink);
  --mg-dorado: var(--mg-gold);
}

/* Tarjetas de confianza del pie: eran blancas con TEXTO BLANCO, invisible. La
   seccion las pintaba para fondo oscuro y el pie ahora es claro. */
body.mg-pagina .mg-pie__conf,
body.mg-pagina .mg-pie__conf * {
  color: var(--mg-ink) !important;
  -webkit-text-fill-color: var(--mg-ink) !important;
}

body.mg-pagina .mg-pie__conf-ico,
body.mg-pagina .mg-pie__conf-ico * {
  color: var(--mg-cyan-accessible) !important;
  -webkit-text-fill-color: var(--mg-cyan-accessible) !important;
}

/* ==========================================================================
   RESTAURACIÓN VISUAL NIMAVO — 2026-08-14
   Base anterior + correcciones solicitadas por Marco.
   - Sin tinta ciruela, sin amarillo en degradados y sin cian oscuro.
   - Todo fondo celeste/azul usa texto blanco.
   - Las tarjetas blancas conservan texto oscuro para no perder contraste.
   ========================================================================== */

:root {
  --mg-white: #FFFFFF;
  --mg-ice: #F5FAFD;
  --mg-sky-light: #58BCE6;
  --mg-sky: #43AEDD;
  --mg-cyan: #329BD5;
  --mg-cyan-strong: #2587C2;
  --mg-cyan-accessible: #2A84C0;
  --mg-ink: #173F57;
  --mg-body: #3D6074;
  --mg-muted: #7DA7B9;
  --mg-border: #B6DCEB;
  --mg-trust: #27865F;
  --mg-gold: #F3B94B;
}

body.mg-pagina {
  --mg-azul: var(--mg-cyan);
  --mg-azul-osc: var(--mg-ink);
  --mg-celeste: var(--mg-sky);
  --mg-celeste-suave: var(--mg-sky-light);
  --mg-niebla: var(--mg-ice);
  --mg-texto: var(--mg-ink);
  --mg-texto-sec: var(--mg-body);
  --mg-texto-ter: var(--mg-body);
  --mg-borde: var(--mg-border);
  --mg-verde: var(--mg-trust);
  --mg-verde-2: var(--mg-trust);
  --mg-blanco: var(--mg-white);
  --mg-sobre-osc: var(--mg-white);
  --mg-sobre-osc-sec: var(--mg-ice);
  --mg-carbon: var(--mg-ink);
  --mg-dorado: var(--mg-gold);
}

body.mg-pagina :is(.mg-barra, .mg-marq) {
  background: var(--mg-cyan) !important;
  background-image: none !important;
  color: var(--mg-white) !important;
}
body.mg-pagina :is(.mg-barra, .mg-marq) :is(h1,h2,h3,h4,h5,h6,p,li,span,a,strong) {
  color: var(--mg-white) !important;
  -webkit-text-fill-color: var(--mg-white);
}

/* Cualquier formato con fondo celeste/azul: texto blanco, sin excepciones.
   Las tarjetas se revierten debajo a blanco + tinta para que no haya blanco
   sobre blanco dentro de un recuadro. */
body.mg-pagina :is(
  .mg-seccion--celeste,
  .mg-seccion--vivo,
  .mg-seccion--cian,
  .mg-seccion--cianfuerte,
  .mg-b-celeste,
  .mg-b-verde,
  .mg-b-osc,
  .mg-b-carbon,
  .mg-band--crema,
  .mg-band--dark,
  .mg-band--deep
) {
  background: var(--mg-sky) !important;
  background-image: none !important;
  color: var(--mg-white) !important;
  --tema-fondo: var(--mg-sky);
  --tema-titulo: var(--mg-white);
  --tema-cuerpo: var(--mg-white);
  --tema-eyebrow: var(--mg-white);
  --tema-borde: rgba(255,255,255,.38);
  --tema-icono: var(--mg-white);
  --tema-cta: var(--mg-white);
  --tema-cta-texto: var(--mg-cyan-accessible);
  --tema-cta-hover: var(--mg-ice);
}

body.mg-pagina :is(
  .mg-seccion--celeste,
  .mg-seccion--vivo,
  .mg-seccion--cian,
  .mg-seccion--cianfuerte,
  .mg-b-celeste,
  .mg-b-verde,
  .mg-b-osc,
  .mg-b-carbon,
  .mg-band--crema,
  .mg-band--dark,
  .mg-band--deep
) :is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,summary,a,.mg-label,.mg-lead,.mg-note,.mg-sm,.mg-xs,.mg-d1,.mg-display) {
  color: var(--mg-white) !important;
  -webkit-text-fill-color: var(--mg-white);
}

body.mg-pagina :is(
  .mg-seccion--celeste,
  .mg-seccion--vivo,
  .mg-seccion--cian,
  .mg-seccion--cianfuerte,
  .mg-b-celeste,
  .mg-b-verde,
  .mg-b-osc,
  .mg-b-carbon,
  .mg-band--crema,
  .mg-band--dark,
  .mg-band--deep
) .mg-card {
  background: var(--mg-white) !important;
  border-color: var(--mg-white) !important;
  color: var(--mg-ink) !important;
}
body.mg-pagina :is(
  .mg-seccion--celeste,
  .mg-seccion--vivo,
  .mg-seccion--cian,
  .mg-seccion--cianfuerte,
  .mg-b-celeste,
  .mg-b-verde,
  .mg-b-osc,
  .mg-b-carbon,
  .mg-band--crema,
  .mg-band--dark,
  .mg-band--deep
) .mg-card :is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,summary,a,.mg-label,.mg-lead,.mg-note,.mg-sm,.mg-xs,.mg-d1,.mg-display) {
  color: var(--mg-ink) !important;
  -webkit-text-fill-color: var(--mg-ink);
}

/* El pie también es una superficie celeste: texto blanco, recuadros claros
   con tinta. */
body.mg-pagina .mg-pie {
  --mg-pie-bg: var(--mg-sky);
  --mg-pie-base: var(--mg-sky);
  background: var(--mg-sky) !important;
  background-image: none !important;
  color: var(--mg-white) !important;
}
body.mg-pagina .mg-pie :is(h2,h3,h4,p,li,a,span,strong,.mg-pie__wordmark) {
  color: var(--mg-white) !important;
  -webkit-text-fill-color: var(--mg-white);
}
body.mg-pagina .mg-pie__conf {
  background: var(--mg-white) !important;
  border-color: var(--mg-white) !important;
}
body.mg-pagina .mg-pie__conf :is(h2,h3,h4,p,li,a,span,strong) {
  color: var(--mg-ink) !important;
  -webkit-text-fill-color: var(--mg-ink);
}
body.mg-pagina .mg-pie__conf-ico {
  background: var(--mg-ice) !important;
  color: var(--mg-cyan-accessible) !important;
}
body.mg-pagina .mg-pie__base {
  background: transparent !important;
  border-top-color: rgba(255,255,255,.35) !important;
}

/* CTA vivo y sin brillo naranja/amarillo. */
body.mg-pagina .mg :is(.mg-btn--p, .mg-btn--p:hover) {
  background: var(--mg-cyan) !important;
  background-image: none !important;
  color: var(--mg-white) !important;
  -webkit-text-fill-color: var(--mg-white);
  box-shadow: 0 8px 22px -10px rgba(37,135,194,.42) !important;
}
body.mg-pagina :is(
  .mg-seccion--celeste,
  .mg-seccion--vivo,
  .mg-seccion--cian,
  .mg-seccion--cianfuerte,
  .mg-b-celeste,
  .mg-b-verde,
  .mg-b-osc,
  .mg-b-carbon,
  .mg-band--crema,
  .mg-band--dark,
  .mg-band--deep
) .mg-btn--p {
  background: var(--mg-white) !important;
  color: var(--mg-cyan-accessible) !important;
  -webkit-text-fill-color: var(--mg-cyan-accessible);
}

/* Degradado metálico sutil solo en superficies blancas; únicamente azules,
   sin combinar amarillo ni ciruela. */
body.mg-pagina :is(.mg-pdp, .mg-b-blanco, .mg-b-niebla, .mg-band--bone, .mg-band--hielo) :is(.mg-pdp__ahora,.mg-hero__ahora,.mg-d1,.mg-display) {
  background: linear-gradient(100deg, var(--mg-cyan-strong) 0%, var(--mg-sky-light) 52%, var(--mg-cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}

/* La lista de beneficios no vuelve a ser texto verde: el color queda en el
   icono/emoji y el copy usa la tinta de la marca. */
body.mg-pagina .mg-pdp__confia li,
body.mg-pagina .mg-hero__confia li {
  color: var(--mg-ink) !important;
  -webkit-text-fill-color: var(--mg-ink);
}
body.mg-pagina .mg-pdp__confia svg {
  color: var(--mg-cyan-accessible) !important;
}

/* Estados de teclado/foco: visibles donde ayudan, nunca como un rectángulo
   azul alrededor del título interno de Bundles. */
body.mg-pagina :is(.rb-obsidian-tier-title, .rb-obsidian-tier-title.rb-selected) {
  outline: none !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  user-select: none;
}

/* Contraste final en módulos especiales — 2026-08-14 */
body.mg-pagina .mg-envios :is(.mg-envios__num,.mg-envios__txt,.mg-envios__txt *) {
  color: var(--mg-white) !important;
  -webkit-text-fill-color: var(--mg-white);
}
body.mg-pagina .mg-subs :is(button,.mg-subscription button) {
  background: var(--mg-white) !important;
  background-image: none !important;
  color: var(--mg-cyan-accessible) !important;
  -webkit-text-fill-color: var(--mg-cyan-accessible);
}

/* Contraste final de rutina — 2026-08-14 */
body.mg-pagina .mg-rutina :is(.mg-rutina__num,.mg-rutina__txt,.mg-rutina__txt *) {
  color: var(--mg-white) !important;
  -webkit-text-fill-color: var(--mg-white);
}


/* Excepciones de contraste para tarjetas oscuras y pastillas claras. */
body.mg-pagina :is(.mg-band--dark, .mg-band--deep).mg-mecanismo .mg-meca__pilar {
  background: rgba(7, 59, 99, 0.42) !important;
  border-color: rgba(255, 255, 255, 0.34) !important;
  color: var(--mg-white) !important;
  -webkit-text-fill-color: var(--mg-white);
}
body.mg-pagina :is(.mg-band--dark, .mg-band--deep).mg-mecanismo .mg-meca__pilar :is(h3, p, li, span, strong, em) {
  color: var(--mg-white) !important;
  -webkit-text-fill-color: var(--mg-white);
}
body.mg-pagina .mg-rutina .mg-tag {
  color: var(--mg-ink) !important;
  -webkit-text-fill-color: var(--mg-ink);
}


/* El badge invisible de hCaptcha no puede ampliar el lienzo horizontal. */
body.mg-pagina #shop-hcaptcha-badge-container {
  left: auto !important;
  right: 0 !important;
  max-width: 100vw !important;
}


/* Contraste puntual y eliminación visual del badge hCaptcha solicitado para MAKILA */
.mg-aviso .mg-aviso__txt p,
.mg-aviso .mg-aviso__txt p strong {
  color: var(--mg-ink, #173f57) !important;
}
.mg-envios .mg-label,
.mg-cierre .mg-label {
  color: var(--mg-ink, #173f57) !important;
}
.mg-form .mg-form__comp {
  background: var(--mg-celeste-strong, #58bce6) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .55) !important;
}
.mg-form .mg-form__comp * {
  color: #fff !important;
}
#shop-hcaptcha-badge-container {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* Contraste puntual: etiqueta de Fórmula 2 en 1 sobre Celeste visible. */
body.mg-pagina .mg-form.mg-b-celeste .mg-tag {
  color: #000000 !important;
  /* duplicate line removed */
}

/* En móvil las fotos deben conservar toda su proporción: nunca zoom ni recorte automático en las imágenes editoriales del producto. */
@media screen and (max-width: 749px) {
  .mg .mg-foto,
  .mg .mg-foto--recorta {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }

  .mg .mg-foto picture,
  .mg .mg-foto img,
  .mg .mg-foto--recorta img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
  }
}
-webkit-text-fill-color: #000000;
}
}

/* Contraste puntual: etiqueta «Qué lleva dentro» en Fórmula 2 en 1. */
body.mg-pagina .mg-form.mg-b-celeste .mg-tag,
body.mg-pagina .mg-form.mg-b-celeste .mg-tag *,
body.mg-pagina .mg-form.mg-b-celeste .mg-tag span {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}