/* ==========================================================================
   En Balance · Materia Clara — maquetación de cabecera, pie y portada.
   Los materiales, la tipografía y los valores viven en materia-clara.css;
   aquí solo se decide DÓNDE va cada pieza en celular (base), tableta
   (≥ 768 px) y escritorio (≥ 1024 px). Referencia: SISTEMA.md §6.
   ========================================================================== */

/* ---- Aislamiento: el tema padre no debe teñir las piezas del sistema ---- */
.mc-cabecera-marco, .mc-mundo, .mc-pie { font-family: var(--mc-fuente); color: var(--mc-tinta); }
.mc-cabecera-marco a, .mc-mundo a, .mc-pie a { color: inherit; text-decoration: none; }
.mc-cabecera-marco a:hover, .mc-mundo a:hover, .mc-pie a:hover { color: var(--mc-acento); }
.mc-mundo h1, .mc-mundo h2, .mc-mundo h3, .mc-mundo p, .mc-mundo figure, .mc-mundo blockquote { font-family: inherit; color: inherit; }
.mc-mundo p, .mc-mundo figure, .mc-mundo blockquote { margin: 0; }
.mc-mundo img, .mc-pie img { max-width: 100%; }
.mc-cabecera-marco [hidden], .mc-mundo [hidden] { display: none !important; }
.mc-acento { color: var(--mc-acento); }

/* El tema padre pone la clase bzotech-elementor-layout-shifts en <body> (base-control.php) y su CSS la
   oculta por completo (opacity: 0, custom-style.css); su script la quita 100 ms DESPUÉS de cargar la
   página (script.js). Resultado: en cada cambio de página TODO el sitio, barra incluida, se veía
   desaparecer y reaparecer. Las páginas ya son plantillas propias (sin los saltos de Elementor que
   esa clase tapaba): el cuerpo se ve desde el primer cuadro. */
body.bzotech-elementor-layout-shifts { opacity: 1; }

/* =============================================================== CABECERA */

.mc-cabecera-marco {
  position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 1000;
  padding: var(--mc-e3) var(--mc-e3) 0;
}
.mc-cabecera {
  max-width: var(--mc-ancho); margin: 0 auto; box-sizing: border-box;
  height: 52px; padding: 0 var(--mc-e1) 0 var(--mc-e4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--mc-e3);
}
.mc-logo { display: flex; align-items: center; flex: none; }
.mc-logo-img { height: 30px; width: auto; display: block; }
.mc-logo-texto { font-size: 18px; font-weight: 700; letter-spacing: -.03em; }
.mc-acciones { display: flex; align-items: center; }
.mc-cabecera-marco button.mc-icono { border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--mc-tinta); }
.mc-carrito { position: relative; }
.mc-punto { position: absolute; top: 9px; right: 7px; width: 8px; height: 8px; border-radius: 999px; background: var(--mc-acento); }

/* Navegación de escritorio: oculta en celular */
.mc-nav { display: none; }
.mc-nav-lista, .mc-menu-lista { list-style: none; margin: 0; padding: 0; }
.mc-nav-lista .mc-oculto, .mc-menu-lista .mc-oculto { display: none !important; }

/* El menú del celular flota SOBRE la página, debajo de la barra: no empuja nada, así el cielo
   continúa detrás sin franjas ni cortes. Cristal denso (blanco 95 → 90 %, desenfoque 40 px) y una
   sombra larga: lo que flota no puede mezclarse con lo de abajo. */
.mc-menu {
  position: absolute; top: 100%; left: var(--mc-e3); right: var(--mc-e3);
  max-width: var(--mc-ancho); margin: var(--mc-e2) auto 0; box-sizing: border-box;
}
.mc-cabecera-marco .mc-menu.mc-vidrio {
  background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.9) 100%);
  -webkit-backdrop-filter: blur(40px) saturate(170%); backdrop-filter: blur(40px) saturate(170%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), inset 0 1px 0 #fff,
    0 1px 1px -.5px rgba(22,21,20,.06), 0 10px 14px -6px rgba(22,21,20,.06), 0 30px 60px -24px rgba(22,21,20,.22);
}

/* ============================================ BÚSQUEDA: "Pregúntale a la tienda"
   Al abrir, el mundo se aleja: la página se desenfoca detrás de un velo con la luz de su hora y el
   contenido retrocede un poco (escala .965, hacia el centro de lo que ves). La búsqueda queda al
   frente, en una columna tranquila: nada se traspapela, porque lo de atrás queda claramente atrás.
   Arriba, el campo grande que levita (luz turquesa centrada debajo, y cada tecla lo enciende apenas);
   abajo, lo que ya viste, los objetivos y lo que más se lleva; al escribir, resultados al instante.
   Lógica: eb-buscar.js. Ver SISTEMA.md "Búsqueda". */
.mc-busca { position: fixed; inset: 0; z-index: 1500; font-family: var(--mc-fuente); color: var(--mc-tinta); }
.mc-busca [hidden] { display: none !important; }
.mc-busca a { color: inherit; text-decoration: none; }
.mc-busca-velo {
  position: absolute; inset: 0;
  background: rgba(247,246,243,.72);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--mc-cielo-1) 55%, rgba(255,255,255,.5)) 0%,
    rgba(255,255,255,.6) 42%,
    color-mix(in srgb, var(--mc-bruma) 72%, transparent) 100%);
  -webkit-backdrop-filter: blur(26px) saturate(140%); backdrop-filter: blur(26px) saturate(140%);
  opacity: 0; transition: opacity .45s var(--mc-curva-entrada);
}
.mc-busca-hoja { position: absolute; inset: 0; display: flex; flex-direction: column; }
/* La columna: 680 px al centro; en celular, todo el ancho con su margen. */
.mc-busca-arriba, .mc-busca-columna { box-sizing: border-box; width: 100%; max-width: calc(680px + 2 * var(--mc-e3)); margin: 0 auto; padding-inline: var(--mc-e3); }
.mc-busca-arriba {
  flex: none; display: flex; align-items: center; gap: var(--mc-e2);
  padding-top: calc(var(--mc-e3) + env(safe-area-inset-top, 0px) + var(--wp-admin--admin-bar--height, 0px));
  padding-bottom: var(--mc-e5);   /* la luz cabe entera aquí: nada la corta ni se le encima */
}
.mc-busca-cuerpo {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  /* lo que sube al desplazar se desvanece bajo el campo, sin corte */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--mc-e3)); mask-image: linear-gradient(180deg, transparent 0, #000 var(--mc-e3));
}
.mc-busca-columna { display: flex; flex-direction: column; gap: var(--mc-e5); padding-top: var(--mc-e3); padding-bottom: calc(var(--mc-e6) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 768px) {
  .mc-busca-arriba { padding-top: calc(clamp(34px, 9vh, 89px) + var(--wp-admin--admin-bar--height, 0px)); }
}

/* Entrar y salir: el velo se enciende (el mundo se desenfoca) y la columna baja 10 px y se asienta. */
.mc-busca-arriba, .mc-busca-cuerpo { opacity: 0; transform: translateY(-10px); transition: opacity .25s ease, transform .5s var(--mc-curva-entrada); }
.mc-busca.mc-abierta .mc-busca-velo { opacity: 1; }
.mc-busca.mc-abierta .mc-busca-arriba { opacity: 1; transform: none; transition-delay: .05s; }
.mc-busca.mc-abierta .mc-busca-cuerpo { opacity: 1; transform: none; transition-delay: .11s; }
html.mc-buscando { overflow: hidden; scrollbar-gutter: stable; }
html.mc-busca-viva .mc-mundo > .mc-contenido { transition: transform .6s var(--mc-curva-layout); }
html.mc-buscando .mc-mundo > .mc-contenido { transform: scale(.965); }
html.mc-buscando .mc-compra-fija { visibility: hidden; }

/* El campo levita por sí mismo: una píldora blanca y limpia, con un canto casi invisible. Detrás
   de ella, una luz turquesa suave y pareja que asoma por abajo, como si la barra flotara y la luz
   saliera de debajo. Al enfocar, barra y luz suben juntas 4 px y la luz se enciende; cada tecla la
   aviva un instante (eb-buscar.js, solo opacidad y escala). La luz va en su propia capa detrás
   (.mc-busca-flota la contiene): nunca una sombra de color pegada al borde, que se ve sucia. */
.mc-busca-flota {
  position: relative; flex: 1; min-width: 0; isolation: isolate;
  transition: transform .6s var(--mc-curva-layout);
}
.mc-busca-flota:focus-within { transform: translateY(-4px); }
.mc-busca-luz {
  /* Sin desenfoque: un degradado que se apaga dentro de su propia caja, así nunca se corta en línea. */
  position: absolute; z-index: 0; left: 4%; right: 4%; top: 50%; bottom: -28px; pointer-events: none;
  background: linear-gradient(180deg, rgba(56,168,178,.42) 0%, rgba(56,168,178,.26) 45%, rgba(56,168,178,.1) 72%, rgba(56,168,178,.03) 88%, rgba(56,168,178,0) 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  opacity: 0; transition: opacity .6s var(--mc-curva-layout);
}
.mc-busca-flota:focus-within .mc-busca-luz { opacity: .8; }
.mc-busca-campo {
  position: relative; z-index: 1; display: flex; align-items: center; gap: var(--mc-e2);
  height: 58px; padding: 0 var(--mc-e2) 0 var(--mc-e4); box-sizing: border-box; border-radius: var(--mc-r-pildora);
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(22,21,20,.06), 0 1px 1px rgba(22,21,20,.03), 0 14px 34px -22px rgba(22,21,20,.14);
  transition: box-shadow .6s var(--mc-curva-layout);
}
.mc-busca-campo:focus-within { box-shadow: inset 0 0 0 1px rgba(31,116,128,.12), 0 1px 1px rgba(22,21,20,.02); }
.mc-busca-lupa { flex: none; display: grid; place-items: center; color: var(--mc-acento); }
.mc-busca-lupa svg { width: 22px; height: 22px; }
.mc-busca input[type="search"] {
  flex: 1; min-width: 0; height: 100%; margin: 0; border: 0 !important; background: transparent !important; box-shadow: none !important;
  padding: 0 var(--mc-e1); font: 500 19px/1 var(--mc-fuente); letter-spacing: -.01em; color: var(--mc-tinta);
  outline: none !important; -webkit-appearance: none; appearance: none;
}
.mc-busca input[type="search"]::placeholder { color: rgba(22,21,20,.45); opacity: 1; }
.mc-busca input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
@media (min-width: 768px) {
  .mc-busca-campo { height: 66px; }
  .mc-busca input[type="search"] { font-size: 23px; }
}
.mc-busca button.mc-busca-borra {
  flex: none; width: 36px; height: 36px; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: var(--mc-r-pildora) !important;
  display: grid; place-items: center; background: rgba(22,21,20,.04) !important; color: var(--mc-texto-3) !important; box-shadow: none !important; cursor: pointer;
}
.mc-busca button.mc-busca-borra:hover { background: rgba(22,21,20,.1) !important; color: var(--mc-tinta) !important; }
.mc-busca-borra svg { width: 16px; height: 16px; }
.mc-busca button.mc-busca-cerrar {
  flex: none; height: 44px; padding: 0 var(--mc-e3) !important; margin: 0 !important; border: 0 !important; border-radius: var(--mc-r-pildora) !important;
  background: transparent !important; box-shadow: none !important; color: var(--mc-tinta) !important;
  font: 600 15px var(--mc-fuente); letter-spacing: 0; text-transform: none; cursor: pointer; transition: background .2s ease;
}
.mc-busca button.mc-busca-cerrar:hover { background: rgba(255,255,255,.6) !important; }

/* Dentro: rótulos, objetivos y filas. Todo es cristal claro sobre el velo, sin otro material. */
.mc-busca-pista { margin: 0; padding: 0 var(--mc-e4); font-size: 14px; line-height: 1.5; color: var(--mc-texto-3); }
.mc-busca-inicio, .mc-busca-resultados { display: flex; flex-direction: column; gap: var(--mc-e5); }
.mc-busca-resultados { gap: var(--mc-e3); }
.mc-busca-grupo { display: flex; flex-direction: column; gap: var(--mc-e3); }
.mc-busca .mc-rotulo { margin: 0; padding: 0 var(--mc-e2); color: var(--mc-texto-3); }
.mc-busca-objetivos { display: flex; flex-wrap: wrap; gap: var(--mc-e2); }
.mc-busca button.mc-busca-objetivo {
  height: 44px; padding: 0 var(--mc-e4) !important; margin: 0 !important; border: 0 !important; border-radius: var(--mc-r-pildora) !important;
  background: rgba(255,255,255,.66) !important; color: var(--mc-tinta) !important; font: 600 15px var(--mc-fuente); letter-spacing: 0; text-transform: none; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.85), 0 1px 1px -.5px rgba(22,21,20,.05), 0 6px 12px -8px rgba(22,21,20,.16) !important;
  transition: background .25s ease, transform .35s var(--mc-curva-layout), box-shadow .35s var(--mc-curva-layout);
}
.mc-busca button.mc-busca-objetivo:hover { background: #fff !important; transform: translateY(-1px); }
.mc-busca-lista { display: flex; flex-direction: column; gap: var(--mc-e2); }
.mc-busca-fila, .mc-busca a.mc-busca-atajo {
  display: flex; align-items: center; gap: var(--mc-e3); padding: var(--mc-e2) var(--mc-e2) var(--mc-e2) var(--mc-e2);
  border-radius: var(--mc-r-pieza); background: rgba(255,255,255,.72);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.85), 0 1px 1px -.5px rgba(22,21,20,.05), 0 8px 16px -12px rgba(22,21,20,.16);
  transition: background .25s ease, box-shadow .35s var(--mc-curva-layout);
}
.mc-busca-fila:hover, .mc-busca-fila:focus-within { background: rgba(255,255,255,.94); box-shadow: inset 0 0 0 1px #fff, 0 1px 1px -.5px rgba(22,21,20,.05), 0 14px 22px -14px rgba(22,21,20,.2); }
/* Como en el anaquel: foto, nombre y para qué es; el precio a la derecha. En celular, bajo el nombre. */
.mc-busca a.mc-busca-producto {
  flex: 1; min-width: 0; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "foto texto precio";
  align-items: center; column-gap: var(--mc-e3); color: var(--mc-tinta); border-radius: var(--mc-r-campo);
}
.mc-busca-foto { grid-area: foto; }
.mc-busca-texto { grid-area: texto; }
.mc-busca-producto > .mc-precio { grid-area: precio; }
@media (max-width: 599px) {
  .mc-busca a.mc-busca-producto { grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "foto texto" "foto precio"; row-gap: 2px; }
  .mc-busca-producto > .mc-busca-texto { align-self: end; }
  .mc-busca-producto > .mc-precio { align-self: start; }
}
.mc-busca-foto { flex: none; width: 56px; height: 56px; border-radius: var(--mc-r-campo); background: #fff; overflow: hidden; display: grid; place-items: center; }
.mc-busca-foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mc-busca-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mc-busca .mc-tarjeta-nombre, .mc-busca-texto b { display: block; padding: 0; font-size: 15.5px; font-weight: 600; line-height: 1.3; color: var(--mc-tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset; }
.mc-busca-detalle { display: block; font-size: 13px; line-height: 1.35; color: var(--mc-texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-busca .mc-precio, .mc-busca .mc-precio .price { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--mc-tinta); margin: 0; padding: 0; white-space: nowrap; }
.mc-busca-fila > .mc-icono { flex: none; }
/* Un atajo (tu pedido, los retos, contacto) no es un producto: un tinte turquesa apenas y su flecha. */
.mc-busca a.mc-busca-atajo { color: var(--mc-tinta); padding-right: var(--mc-e3); background: rgba(236,245,246,.82); box-shadow: inset 0 0 0 1px rgba(31,116,128,.14), 0 8px 16px -12px rgba(31,116,128,.25); }
.mc-busca a.mc-busca-atajo:hover { background: rgba(244,250,250,.96); color: var(--mc-tinta); }
.mc-busca-atajo > .mc-icono { flex: none; color: var(--mc-acento); }
.mc-busca-atajo > svg { flex: none; color: var(--mc-acento); }
.mc-busca-cuenta { margin: 0; padding: 0 var(--mc-e2); font-size: 13px; font-weight: 600; color: var(--mc-texto-3); }
.mc-busca a.mc-busca-todos { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--mc-e1); padding: var(--mc-e2); font-size: 15px; font-weight: 600; color: var(--mc-acento); }
.mc-busca-todos svg { width: 16px; height: 16px; }
.mc-busca-nada { display: flex; flex-direction: column; align-items: center; gap: var(--mc-e2); text-align: center; padding: var(--mc-e5) var(--mc-e4); border-radius: var(--mc-r-panel); background: rgba(255,255,255,.72); box-shadow: inset 0 0 0 1px rgba(255,255,255,.85), 0 12px 24px -16px rgba(22,21,20,.18); }
.mc-busca-nada-titulo { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.mc-busca-nada .mc-nota { margin: 0 0 var(--mc-e3); max-width: 34ch; }
.mc-busca-persona { margin: 0; display: flex; align-items: center; gap: var(--mc-e3); padding: 0 var(--mc-e2); font-size: 14px; color: var(--mc-texto-2); }
.mc-busca-persona .mc-icono { flex: none; width: 40px; height: 40px; color: var(--mc-acento); }
.mc-busca a.mc-enlace { color: var(--mc-acento); font-weight: 600; }
.mc-busca a.mc-enlace:hover { color: var(--mc-acento-hover); }
.mc-busca a.mc-boton--principal, .mc-busca a.mc-boton--principal:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .mc-busca-velo, .mc-busca-arriba, .mc-busca-cuerpo, html.mc-busca-viva .mc-mundo > .mc-contenido { transition: none !important; }
  html.mc-buscando .mc-mundo > .mc-contenido, .mc-busca-arriba, .mc-busca-cuerpo, .mc-busca-flota:focus-within { transform: none !important; }
}
.mc-menu { padding: var(--mc-e2); border-radius: var(--mc-r-pieza); max-height: calc(100vh - 110px); overflow-y: auto; }
.mc-menu-lista a { display: block; padding: var(--mc-e3); border-radius: var(--mc-r-campo); font-size: 16px; font-weight: 600; }
.mc-menu-lista a:hover { background: rgba(255,255,255,.55); }
.mc-menu-lista .sub-menu { list-style: none; margin: 0; padding: 0 0 var(--mc-e2) var(--mc-e3); }
.mc-menu-lista .sub-menu a { padding: var(--mc-e2) var(--mc-e3); font-size: 15px; font-weight: 400; color: var(--mc-texto-2); }
/* Desplegable de Tienda: cuántos productos hay, en una pastilla de cristal a
   la derecha (el número lo pone functions.php en ::after). "Ver todos" cierra
   la lista, separado por un filete. */
.mc-nav-lista .eb-mm-cat > a, .mc-menu-lista .eb-mm-cat > a { display: flex !important; align-items: center; justify-content: space-between; gap: var(--mc-e3); }
.mc-nav-lista .eb-mm-cat > a::after, .mc-menu-lista .eb-mm-cat > a::after {
  flex: none; min-width: 28px; height: 22px; padding: 0 var(--mc-e2); box-sizing: border-box; display: inline-grid; place-items: center;
  border-radius: var(--mc-r-pildora); background: rgba(255,255,255,.72); box-shadow: inset 0 0 0 1px rgba(22,21,20,.08), inset 0 1px 0 #fff;
  font-size: 12px; font-weight: 600; line-height: 1; color: var(--mc-texto-2); font-variant-numeric: tabular-nums;
}
.mc-nav-lista .eb-mm-cat > a:hover::after, .mc-menu-lista .eb-mm-cat > a:hover::after { color: var(--mc-tinta); background: #fff; }
.mc-nav-lista .eb-mm-todos, .mc-menu-lista .eb-mm-todos { margin-top: var(--mc-e1); padding-top: var(--mc-e1); border-top: 1px solid var(--mc-filete); }
.mc-nav-lista .eb-mm-todos > a, .mc-menu-lista .eb-mm-todos > a { font-weight: 600 !important; color: var(--mc-tinta) !important; }

@media (min-width: 1024px) {
  .mc-cabecera { height: 56px; padding-left: var(--mc-e5); }
  .mc-logo-img { height: 34px; }
  .mc-nav { display: block; }
  .mc-nav-lista { display: flex; gap: var(--mc-e2); }   /* igual con o sin la pastilla (JS): nada se recorre al cargar */
  .mc-nav-lista > li { position: relative; }
  .mc-nav-lista > li.mc-solo-movil { display: none; }
  .mc-nav-lista > li > a { display: block; padding: var(--mc-e2) var(--mc-e3); font-size: 14px; font-weight: 600; }
  /* El desplegable de Tienda: un panel de cristal */
  .mc-nav-lista .sub-menu {
    position: absolute; top: calc(100% + var(--mc-e3)); left: calc(-1 * var(--mc-e4));
    min-width: 260px; list-style: none; margin: 0; padding: var(--mc-e2);
    display: none; flex-direction: column; gap: 2px; border-radius: var(--mc-r-pieza);
    background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.62));
    -webkit-backdrop-filter: blur(30px) saturate(200%); backdrop-filter: blur(30px) saturate(200%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), inset 0 1px 0 #fff, 0 6px 6px -3px rgba(22,21,20,.05), 0 34px 70px -44px rgba(22,21,20,.34);
  }
  .mc-nav-lista .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * var(--mc-e3)); height: var(--mc-e3); }
  .mc-nav-lista > li:hover > .sub-menu, .mc-nav-lista > li:focus-within > .sub-menu { display: flex; }
  .mc-nav-lista .sub-menu a { display: block; padding: var(--mc-e2) var(--mc-e3); border-radius: var(--mc-r-campo); font-size: 14px; font-weight: 500; }
  .mc-nav-lista .sub-menu a:hover { background: rgba(255,255,255,.7); }
  .mc-boton-menu, .mc-menu { display: none !important; }
}

/* ============================================================== PORTADA */

/* El cielo empieza detrás de la cabecera: el fondo del documento es el cielo. */
/* Aplica a toda plantilla propia que ponga la clase mc-con-cielo (tienda, páginas, cuenta…):
   si la regla vive en la hoja de una sola página, las demás quedan con franjas blancas arriba y abajo. */
body.home, body.mc-con-cielo { background: var(--mc-cielo-1) !important; }
body.home::before, body.home::after, body.mc-con-cielo::before, body.mc-con-cielo::after { content: none !important; }
body.mc-con-cielo .mc-pie { background: var(--mc-suelo); }

/* La portada (maqueta v6): cielo → menta → agua, con halos difuminados. Nada de durazno ni amanecer:
   el horizonte es menta clara y el "sol" es solo un resplandor blanco. */
body.home .mc-mundo {
  --mc-horizonte: #eaf4ef;
  --mc-bruma: #eef5f2;
  --mc-linea-horizonte: rgba(255, 255, 255, .5);
  --mc-halo-1: rgba(159, 220, 175, .55);
  --mc-halo-2: rgba(78, 203, 217, .40);
  --mc-halo-3: rgba(168, 214, 236, .60);
  --mc-halo-4: rgba(159, 220, 175, .42);
}
body.home .mc-sol {
  background:
    radial-gradient(680px 520px at 16% 22%, rgba(255, 255, 255, .7), transparent 72%),
    radial-gradient(140% 110px at 50% 68.4%, rgba(255, 255, 255, .45), transparent 78%);
}
@media (min-width: 1024px) { body.home .mc-mundo, body.mc-pagina-retos .mc-mundo { --mc-halo-ancho: 1000px; --mc-halo-alto: 720px; } }

/* La luz de la tienda y de la ficha (el mismo local): escaparate. Clara, pareja y neutra, para que lo que brille sean los productos
   (el fondo no compite con lo que vendes). Una luz amplia arriba, como la de un local; halos suaves. */
body.mc-tienda-pagina, body.mc-tienda-pagina .mc-mundo, body.mc-ficha-pagina, body.mc-ficha-pagina .mc-mundo {   /* también en body: el rebote y el fondo general */
  --mc-cielo-1: #d9e6ec;
  --mc-cielo-2: #edf2f4;
  --mc-horizonte: #f4f3ef;
  --mc-bruma: #f3f4f1;
  --mc-linea-horizonte: rgba(255, 255, 255, .6);
  --mc-halo-1: var(--mc-halo-cielo);
  --mc-halo-2: rgba(159, 220, 175, .45);
  --mc-halo-3: rgba(78, 203, 217, .34);
  --mc-halo-4: rgba(240, 168, 112, .24);
}
body.mc-tienda-pagina .mc-sol, body.mc-ficha-pagina .mc-sol {
  background:
    radial-gradient(1100px 320px at 50% 0%, rgba(255, 255, 255, .8), transparent 70%),
    radial-gradient(130% 70px at 50% 68.4%, var(--mc-linea-horizonte), transparent 75%);
}
/* El mundo empieza arriba del todo, DETRÁS de la cabecera flotante: su cielo, su sol y la luz
   que te sigue pasan por detrás del cristal de la barra. Si empezara debajo, detrás de la barra
   quedaba el fondo general y se veía un corte (más en páginas con otra luz, o con el sol arriba).
   Sube lo que mide el marco (13 de aire + la barra) y lo devuelve en relleno: el contenido no se mueve. */
:root { --mc-alto-marco: 65px; --mc-aire-tema: 30px; }                 /* 13 + 52; el tema da 30 arriba */
@media (min-width: 768px) { :root { --mc-aire-tema: 50px; } }
@media (min-width: 1024px) { :root { --mc-alto-marco: 69px; } }         /* 13 + 56 */
/* Con el id: el relleno del tema está escrito sobre #main-content y pesa más que una clase. */
.mc-cabecera-marco + .mc-mundo, .mc-cabecera-marco + #main-content.mc-mundo { margin-top: calc(-1 * var(--mc-alto-marco)); padding-top: calc(var(--mc-aire-tema) + var(--mc-alto-marco)); }
.mc-cabecera-marco + .mc-mundo > .mc-amanecer, .mc-cabecera-marco + .mc-mundo > .mc-sol { height: calc(var(--mc-alto-amanecer) + var(--mc-alto-marco)); }
.mc-cabecera-marco + .mc-mundo > .mc-aurora { top: calc(var(--mc-alto-amanecer) + var(--mc-alto-marco)); }

/* El botón "subir" del tema (cuadro naranja, flecha inclinada) pasa a ser un icono ligero.
   No se toca su display: el tema lo muestra y oculta al desplazarse. En celular no va:
   ahí vive la barra fija de compra. */
body a.scroll-top {
  width: 44px !important; height: 44px !important; right: 21px !important; padding: 0 !important; pointer-events: none;
  transition: opacity .3s ease, bottom .42s var(--mc-curva-entrada) !important;
  border: 0 !important; border-radius: var(--mc-r-pildora) !important; font-size: 0 !important; line-height: 0 !important;
  background: rgba(255,255,255,.5) !important; color: var(--mc-tinta) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), inset 0 1px 0 #fff, 0 8px 21px -13px rgba(22,21,20,.35) !important;
}
body a.scroll-top i { display: none !important; }
body a.scroll-top::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
body a.scroll-top.active { bottom: 21px !important; pointer-events: auto; }   /* solo existe cuando se ve (al subir) */
body a.scroll-top:hover { background: rgba(255,255,255,.75) !important; color: var(--mc-acento) !important; }
@media (max-width: 1023px) { body a.scroll-top { display: none !important; } }

.mc-portada { --mc-alto-amanecer: 760px; }
.mc-secciones { display: flex; flex-direction: column; gap: var(--mc-aire); padding: var(--mc-e3) 0 var(--mc-e7); }
.mc-bloque { display: flex; flex-direction: column; gap: var(--mc-e4); }

/* Portada: texto → carrusel → confianza (celular); dos columnas (escritorio) */
.mc-heroe { display: grid; grid-template-areas: "texto" "carrusel" "confianza"; gap: var(--mc-e5); }
.mc-heroe-texto { grid-area: texto; display: flex; flex-direction: column; gap: var(--mc-e3); padding-top: var(--mc-e4); }
.mc-heroe .mc-display { max-width: 12ch; }
.mc-heroe .mc-lede { max-width: 34ch; }
.mc-heroe-botones { display: flex; flex-wrap: wrap; gap: var(--mc-e2); padding-top: var(--mc-e2); }
.mc-boton--corto { padding: 0 var(--mc-e4); }
.mc-confianza { grid-area: confianza; margin-top: 0; }
/* Tres pastillas ligeras bajo los botones (chip existente, más chico): no compiten con el botón principal */
.mc-pastillas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--mc-e3) var(--mc-e5); }
.mc-pastillas li { display: flex; max-width: 100%; }
.mc-chip.mc-pastilla { flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; box-sizing: border-box; min-height: 40px; padding: 9px var(--mc-e4); font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--mc-texto-2); }
.mc-mundo a.mc-pastilla--enlace { color: var(--mc-tinta); font-weight: 600; }
.mc-heroe-carrusel { grid-area: carrusel; min-width: 0; }

/* Carrusel: se desliza con el dedo; la siguiente vitrina asoma. Nunca rota solo. */
.mc-carrusel {
  display: flex; gap: var(--mc-e3); overflow-x: auto; overscroll-behavior-x: contain; scroll-behavior: auto; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 calc(-1 * var(--mc-margen)) calc(-1 * var(--mc-e6)); padding: var(--mc-e2) calc(50% - 116px) var(--mc-e7);
  /* Lo que sale por los lados se desvanece, como si pasara por detrás, y la
     sombra tiene 89 px para caer completa (un carril deslizable recorta todo
     lo que sale de su caja). El margen negativo devuelve ese espacio. */
  --mc-borde-suave: var(--mc-e5);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--mc-borde-suave), #000 calc(100% - var(--mc-borde-suave)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--mc-borde-suave), #000 calc(100% - var(--mc-borde-suave)), transparent 100%);
}
.mc-carrusel::-webkit-scrollbar, .mc-chips::-webkit-scrollbar, .mc-testimonios::-webkit-scrollbar { display: none; }
.mc-diapositiva { flex: none; width: 232px; box-sizing: border-box; padding: var(--mc-e2); scroll-snap-align: center; display: flex; flex-direction: column; }
@media (max-width: 767px) {
  .mc-portada .mc-carrusel {
    padding-inline-start: var(--mc-margen);
    /* Deja espacio al final para que también la última tarjeta llegue al mismo borde. */
    padding-inline-end: max(var(--mc-margen), calc(100vw - var(--mc-margen) - 232px));
    scroll-padding-inline-start: var(--mc-margen);
  }
  .mc-portada .mc-diapositiva { scroll-snap-align: start; }
}
.mc-diapositiva .mc-vitrina { height: 206px; border-radius: var(--mc-r-campo); }
.mc-diapositiva-pie { display: flex; justify-content: space-between; align-items: baseline; gap: var(--mc-e2); padding: var(--mc-e3) var(--mc-e2) var(--mc-e1); }
.mc-diapositiva-nombre { font-size: 15px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-carrusel-control { display: flex; align-items: center; justify-content: center; gap: var(--mc-e3); margin-top: calc(-1 * var(--mc-e3)); position: relative; z-index: 2; }
/* El carril se alarga 55 px abajo para la sombra y, por la máscara, se pinta
   encima de lo que sigue: lo que va debajo tiene que subir de capa o pierde el clic. */
.mc-confianza, .mc-heroe-texto { position: relative; z-index: 2; }
.mc-carrusel-control .mc-flecha, .mc-contador { display: none; }
.mc-carrusel-control button { border: 0; padding: 0; cursor: pointer; color: var(--mc-tinta); }
.mc-puntos { display: flex; gap: var(--mc-e1); }
.mc-puntos i { width: 5px; height: 5px; border-radius: 999px; background: rgba(22,21,20,.25); transition: width .3s var(--mc-curva-layout), background .3s ease; }
.mc-puntos i.mc-activo { width: 21px; background: var(--mc-tinta); }

.mc-portada .mc-secciones { padding-bottom: var(--mc-e5); }
#main-content.mc-portada { padding-bottom: 0; }   /* el relleno de abajo que pone el tema sumaba otros 50 px antes del pie */

/* Carrusel de la portada: flechas, "1 de N" y "Ver todas las ofertas" también en celular */
.mc-diapositiva .mc-vitrina { position: relative; }
.mc-heroe .mc-carrusel-control { justify-content: flex-start; gap: var(--mc-e3); padding-left: 0; }
.mc-heroe .mc-carrusel-control .mc-flecha { display: grid; }
.mc-heroe .mc-contador { display: inline; font-weight: 600; white-space: nowrap; }
.mc-mundo a.mc-enlace.mc-todas { white-space: nowrap; }
.mc-mundo a.mc-enlace.mc-todas, .mc-objetivos a.mc-enlace { color: var(--mc-acento); }
.mc-mundo a.mc-enlace.mc-todas { margin-left: auto; }
.mc-v-ancho { display: none; }
@media (min-width: 768px) { .mc-v-ancho { display: inline; } .mc-v-angosto { display: none; } }
/* Enlaces de texto de la portada: área táctil de 44 px sin cambiar cómo se ven (la altura extra se devuelve con margen negativo). */
.mc-portada a.mc-enlace { display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; }
.mc-portada .mc-carrusel-control a.mc-enlace { margin-block: 0; }
@media (min-width: 1024px) { .mc-heroe .mc-carrusel-control { padding-left: var(--mc-e4); } }


/* ---- ¿Qué buscas hoy? El único bento de la página ----
   Cada cuadro tiene la anatomía de la tarjeta de producto: marco de cristal chico + panel blanco
   (.mc-vitrina) con la imagen + texto breve en el pie. El cristal solo se ve como marco y pie. */
.mc-cabeza--titulo { align-items: flex-end; }
.mc-titulo-doble { display: flex; flex-direction: column; gap: var(--mc-e2); min-width: 0; }
.mc-bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mc-e3); grid-auto-flow: dense; }
.mc-mundo a.mc-bento-c, .mc-mundo a.mc-bento-c:hover { color: var(--mc-tinta); }
.mc-bento-c { box-sizing: border-box; min-width: 0; }   /* el marco es .mc-cristal (relleno, columna y radio del sistema) */
/* El panel blanco usa .mc-cristal-panel (materia-clara.css): producto centrado, mismo aire en los cuatro lados. */
.mc-bento-panel { flex: none; height: 130px; }
.mc-bento-panel--persona img { width: 100%; height: 100%; object-fit: cover; max-width: none; display: block; }
/* El pie: nombre en el estilo display del sistema (como los h3), leyenda, y una línea de datos con el botón redondo. */
.mc-bento-pie { display: flex; flex-direction: column; gap: var(--mc-e2); min-width: 0; padding: var(--mc-e1) var(--mc-e1) var(--mc-e1) var(--mc-e2); }
.mc-bento-texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mc-bento-nombre { font-size: 16px; font-weight: 700; line-height: 1.15; letter-spacing: -.03em; text-wrap: balance; }
.mc-bento-ley { font-size: 15px; line-height: 1.45; color: var(--mc-texto-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mc-bento-base { display: flex; align-items: center; justify-content: space-between; gap: var(--mc-e2); }
.mc-bento-dato { min-width: 0; font-size: 13px; line-height: 1.35; }
.mc-bento-dato > b, .mc-bento-dato > .mc-nota { display: block; white-space: nowrap; }
.mc-bento-dato > b { font-weight: 600; font-size: 13px; letter-spacing: -.01em; color: var(--mc-tinta); }
.mc-bento-sep { display: none; }
/* El botón redondo es visual (el cuadro entero es el enlace); sigue al cursor con el imán "flecha" (3 px) y no se ilumina. */
.mc-bento-flecha {
  flex: none; background: rgba(255,255,255,.72); color: var(--mc-tinta);
  -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5);
  box-shadow: 0 0 0 1px rgba(20,36,34,.05), 0 1px 2px rgba(20,36,34,.06), 0 3px 8px -4px rgba(20,36,34,.12);
}
.mc-bento-flecha svg { width: 18px; height: 18px; }
.mc-bento-c--grande { grid-column: span 2; }
.mc-bento-c--grande .mc-bento-panel { height: 190px; }
.mc-bento-c--grande .mc-bento-nombre { font-size: 22px; }
.mc-bento-c--ancho .mc-bento-ley { display: none; }   /* celular: el cuadro ancho es uno más; la leyenda va desde 1024 px */
@media (min-width: 1024px) {
  .mc-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 250px; gap: var(--mc-e4); }
  .mc-bento-panel { flex: 1; height: auto; min-height: 0; }
  .mc-bento-nombre { font-size: 20px; }
  .mc-bento-dato > b, .mc-bento-dato > .mc-nota, .mc-bento-sep { display: inline; }
  .mc-bento-dato > .mc-nota { font-size: 13px; }
  .mc-bento-dato > b { font-size: 14px; letter-spacing: 0; }
  .mc-bento-pie { padding: var(--mc-e1) var(--mc-e2) var(--mc-e1); }
  .mc-bento-c--grande { grid-row: span 2; }
  .mc-bento-c--grande .mc-bento-panel { height: auto; }
  .mc-bento-c--grande .mc-bento-nombre { font-size: 30px; }
  .mc-bento-c--grande .mc-bento-pie { padding-bottom: var(--mc-e2); }
  .mc-bento-c--ancho { grid-column: span 2; flex-direction: row; align-items: stretch; }
  .mc-bento-c--ancho .mc-bento-panel { flex: 0 0 46%; }
  .mc-bento-c--ancho .mc-bento-pie { flex: 1; justify-content: space-between; padding: var(--mc-e3) var(--mc-e2) var(--mc-e2) var(--mc-e3); }
  .mc-bento-c--ancho .mc-bento-nombre { font-size: 24px; }
  .mc-bento-c--ancho .mc-bento-ley { display: -webkit-box; }
  .mc-bento-c--paquetes .mc-bento-panel { flex-basis: 52%; }
  .mc-bento-c--paquetes .mc-bento-panel img { width: 94%; height: 94%; }
}
/* Desde 1280 px el bento es un poco más ancho que el resto (80 px más por lado), sin desbordar la pantalla. */
@media (min-width: 1280px) {
  .mc-objetivos { box-sizing: border-box; max-width: none; padding-inline: 0; width: min(calc(min(100vw, var(--mc-ancho)) - 2 * var(--mc-margen) + 160px), calc(100% - 42px)); }
}

/* Estrellas de la tarjeta (reales; las simuladas solo salen donde el filtro lo permite) */
.mc-estrellas { padding: 0 var(--mc-e2); font-size: 13px; color: var(--mc-texto-3); }

/* ---- Paquetes: texto + ficha de un paquete a la izquierda, foto de personas a la derecha ---- */
.mc-paq-banda { position: relative; padding: var(--mc-e5) 0 var(--mc-e6); margin-top: calc(-1 * var(--mc-e4)); }
/* El color vive en una capa aparte y entra y sale difuminado (máscara): sin borde duro arriba ni abajo. */
.mc-paq-banda::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;   /* detrás de la luz del fondo y de los halos: no los tapa */
  background: linear-gradient(100deg, #e2edf0 0%, #eaf4ef 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 34%, #000 66%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 34%, #000 66%, transparent 100%);
}
/* Un halo suave detrás (como los del bento) para que el cristal de la ficha tome color y no se aplane. */
.mc-paq-banda::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(520px 300px at 24% 64%, rgba(159,220,175,.2), transparent 70%), radial-gradient(460px 280px at 72% 28%, rgba(78,203,217,.1), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
}
.mc-paq-banda > .mc-paq { position: relative; z-index: 1; }
.mc-paq { display: grid; grid-template-areas: "cab" "foto" "nav" "cuerpo"; gap: var(--mc-e4); }
/* El mundo de la portada es su propio contexto de apilado: así las capas de color con z-index negativo quedan DETRÁS de la luz que sigue al cursor. */
.mc-portada { isolation: isolate; }
.mc-paq-cab { grid-area: cab; display: flex; flex-direction: column; gap: var(--mc-e3); align-items: flex-start; }
.mc-paq-titulo { font-size: clamp(28px, 1.3rem + 1.6vw, 48px); line-height: 1.08; max-width: 14ch; }
.mc-paq-cuerpo { grid-area: cuerpo; display: flex; flex-direction: column; gap: var(--mc-e4); align-items: flex-start; }
.mc-paq-cuerpo .mc-lede { max-width: 46ch; }
.mc-paq-foto { grid-area: foto; position: relative; height: 230px; }
.mc-paq-personas { display: block; height: 100%; border-radius: var(--mc-r-pieza); overflow: hidden; }
.mc-paq-personas img { width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; }
/* La caja que flota sobre la foto: .mc-paq-lugar (tamaño) usa .mc-esquina + .mc-flota del sistema (esquina, inclinación, paralaje y salida/entrada),
   con el enlace de cristal dentro (el imán y el acercamiento viven en el enlace, así no se pisan). */
.mc-paq-lugar { width: 104px; height: 104px; }
.mc-paq-caja { display: block; position: relative; width: 100%; height: 100%; box-sizing: border-box; }
/* Paquete: dos botones redondos de 52 px (.mc-redondo--profundo), juntos y a la derecha justo debajo de la foto. */
.mc-paq-nav { grid-area: nav; justify-self: end; display: flex; gap: var(--mc-e3); margin-top: var(--mc-e5); }
/* El panel blanco de la caja: el mismo margen en los cuatro lados (.mc-cristal-panel pone la imagen centrada). */
.mc-paq-caja-panel { position: absolute; inset: var(--mc-e2); display: block; }
.mc-paq-caja-panel > img { width: 82%; height: 82%; transition: transform .56s var(--mc-curva-layout); }
@media (hover: hover) and (pointer: fine) { .mc-paq-caja:hover .mc-paq-caja-panel > img { transform: scale(1.04); } }
/* Candidatos: solo se ve el marcado "mc-paq-ve" (el navegador elige uno al azar; sin JavaScript, el primero). */
[data-mc-paq]:not(.mc-paq-ve) { display: none; }
.mc-paq-foto--tres { height: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mc-e3); }
/* La ficha: una tarjeta de producto horizontal (mismas clases de nombre, precio y "+" que "Los más vendidos") */
.mc-tarjeta.mc-paq-ficha { align-self: stretch; flex-direction: row; align-items: stretch; gap: var(--mc-e3); }
.mc-tarjeta.mc-paq-ficha > .mc-vitrina { flex: none; width: 140px; align-self: center; }
.mc-tarjeta.mc-paq-ficha > .mc-vitrina > img { width: 82%; height: 82%; }
.mc-paq-desc { padding: 0 var(--mc-e2); font-size: 14px; line-height: 1.4; color: var(--mc-texto-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mc-paq-ficha-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: var(--mc-e2); padding: var(--mc-e1) 0; }
@media (min-width: 1024px) {
  .mc-paq-banda { padding: var(--mc-e6) 0 var(--mc-e7); }
  .mc-paq { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "cab foto" "cuerpo foto" ". nav"; column-gap: var(--mc-e6); row-gap: var(--mc-e4); align-items: center; }
  .mc-paq-cab { align-self: end; }
  .mc-paq-cuerpo { align-self: start; }
  .mc-paq-foto { height: 420px; }
  .mc-paq-personas { border-radius: var(--mc-r-panel); }
  .mc-paq-lugar { width: 170px; height: 170px; }
}

/* ---- Lo que dicen: una tarjeta de cristal que flota sobre la orilla de una foto grande ---- */
.mc-voces-escena { position: relative; display: flex; flex-direction: column; }
.mc-voces-foto { display: block; height: 260px; border-radius: var(--mc-r-pieza); overflow: hidden; }
.mc-voces-foto img { width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; }
.mc-voces-lado { position: relative; z-index: 2; margin: calc(-1 * var(--mc-e6)) var(--mc-e3) 0; display: flex; flex-direction: column; gap: var(--mc-e3); }
.mc-voces-escena--sin .mc-voces-lado { margin: 0; }
/* Los 4 testimonios apilados en la misma celda: la tarjeta mide siempre lo de la más alta (cero saltos al cambiar). */
.mc-voces-tarjeta { display: grid; }
.mc-voces-tarjeta > .mc-voz { grid-area: 1 / 1; }
[data-mc-voz]:not(.mc-voz-ve) { visibility: hidden; opacity: 0; pointer-events: none; }
.mc-voces-nav { display: flex; align-items: center; gap: var(--mc-e3); }
.mc-voces-cuenta { font-weight: 600; letter-spacing: .08em; }
.mc-voz { margin: 0; display: flex; flex-direction: column; gap: var(--mc-e3); }
/* (ángulo propio y entrada desde el lado de la flecha: .mc-entra-lado, del sistema) */
/* La cita va directo sobre el cristal (sin panel blanco), con una comilla grande en jade como adorno. */
.mc-voz-cita { position: relative; flex: 1; margin: 0; padding: var(--mc-e5) 0 0; }
.mc-voz-cita::before { content: "\201C"; position: absolute; left: -2px; top: -8px; font: 700 64px/1 Georgia, "Times New Roman", serif; color: var(--mc-acento); opacity: .55; pointer-events: none; }
.mc-voz-cita p { font-size: 17px; line-height: 1.55; text-align: justify; -webkit-hyphens: auto; hyphens: auto; text-wrap: pretty; }
.mc-voz-pie { margin-top: auto; padding: var(--mc-e3) 0 0; border-top: 1px solid var(--mc-filete); font-size: 14px; font-weight: 600; color: var(--mc-texto-3); }
@media (min-width: 1024px) {
  .mc-voces-escena { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
  .mc-voces-foto { grid-column: 1 / span 7; grid-row: 1; height: 440px; border-radius: var(--mc-r-panel); }
  .mc-voces-lado { grid-column: 8 / span 5; grid-row: 1; margin: 0 0 0 calc(-1 * var(--mc-e5)); }   /* la tarjeta monta apenas la orilla de la foto */
  .mc-voces-escena--sin .mc-voces-lado { grid-column: 1 / -1; }
  .mc-voces-nav { justify-content: flex-end; }
  .mc-voz-cita p { font-size: 18px; }
}

/* Categorías: una fila que se desliza (celular) o que se acomoda (escritorio) */
.mc-chips {
  display: flex; gap: var(--mc-e2); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--mc-margen)); padding: 2px var(--mc-margen) var(--mc-e2);
  /* Como todo carril: lo que sigue se va por detrás, no se corta. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--mc-e4), #000 calc(100% - var(--mc-e4)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--mc-e4), #000 calc(100% - var(--mc-e4)), transparent 100%);
}

/* Productos */
.mc-cabeza { display: flex; justify-content: space-between; align-items: center; gap: var(--mc-e3); }
.mc-productos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mc-e3); }
.mc-tarjeta { padding: var(--mc-e2); display: flex; flex-direction: column; gap: var(--mc-e2); }
.mc-tarjeta-nombre {
  padding: var(--mc-e1) var(--mc-e2) 0; font-size: 15px; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mc-tarjeta-pie { display: flex; align-items: center; justify-content: space-between; padding-left: var(--mc-e2); margin-top: auto; }
.mc-precio del { color: var(--mc-texto-3); font-weight: 400; margin-right: var(--mc-e1); }
.mc-precio ins { text-decoration: none; }
/* El botón "+" también es un enlace de WooCommerce: se blinda contra el tema. */
.mc-mundo .mc-tarjeta-pie a.mc-icono {
  width: 44px !important; height: 44px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important;
  display: grid !important; place-items: center; border: 0 !important; border-radius: 999px !important;
  background: rgba(255,255,255,.5) !important; color: var(--mc-tinta) !important; font-size: 0 !important; line-height: 1 !important;
}
/* El "+" no compite con el botón principal: cristal limpio, sin degradados. En reposo apenas se
   asienta sobre la tarjeta; al pasar encima se despega hacia quien mira (sube 2 px y la sombra se
   abre en capas: contacto, cuerpo y ambiente) y el ícono se prende en jade (#1f8a72, 4.25:1). */
.mc-mundo .mc-tarjeta-pie a.mc-icono {
  background: rgba(255,255,255,.72) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 0 0 1px rgba(20,36,34,.06),
              0 1px 2px rgba(20,36,34,.06), 0 3px 8px -4px rgba(20,36,34,.12) !important;
  transition: color .3s ease, background-color .3s ease, box-shadow .35s cubic-bezier(.2,.8,.2,1), transform .35s cubic-bezier(.2,.8,.2,1);
}
.mc-mundo .mc-tarjeta-pie a.mc-icono:hover,
.mc-mundo .mc-tarjeta-pie a.mc-icono:focus-visible {
  color: #1f8a72 !important; outline: none; transform: translateY(-2px);
  background: rgba(255,255,255,.94) !important;
  /* Al despegarse deja luz jade reflejada en la pantalla, justo debajo del centro. */
  box-shadow: inset 0 0 0 1px #fff, inset 0 -10px 16px -12px rgba(31,138,114,.22),
              0 0 0 1px rgba(31,138,114,.22),
              0 2px 4px rgba(20,36,34,.06), 0 4px 8px -5px rgba(20,36,34,.08),
              0 5px 10px -6px rgba(31,138,114,.20), 0 0 10px -4px rgba(31,138,114,.12) !important;
}
@media (prefers-reduced-motion: reduce) { .mc-mundo .mc-tarjeta-pie a.mc-icono:hover { transform: none; } }
.mc-mundo .mc-tarjeta-pie a.added_to_cart { display: none !important; }
/* Piezas de texto de todo el sitio: introducción de sección y enlace con flecha */
.mc-mundo a.mc-enlace { display: inline-flex; align-items: center; gap: var(--mc-e1); font-size: 15px; font-weight: 600; color: var(--mc-texto-2); }
.mc-mundo a.mc-enlace:hover { color: var(--mc-acento); }
.mc-enlace svg { width: 16px; height: 16px; transition: transform .3s var(--mc-curva-layout); }
.mc-enlace:hover svg { transform: translateX(3px); }
.mc-pag-intro { display: flex; flex-direction: column; gap: var(--mc-e3); }
.mc-pag-intro .mc-h2 { max-width: 26ch; }
.mc-pag-intro .mc-lede { max-width: 60ch; }
.mc-pag-intro .mc-nota a { color: var(--mc-acento) !important; font-weight: 600; text-decoration: underline !important; text-underline-offset: 3px; }

/* La vitrina de la tarjeta: la etiqueta del anaquel y la segunda foto ("darle la vuelta") */
.mc-tarjeta .mc-vitrina { position: relative; }
.mc-tarjeta .mc-vitrina > img { grid-area: 1 / 1; transition: opacity .42s ease, transform .56s var(--mc-curva-layout); }
.mc-vitrina-otra { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .mc-tarjeta:hover .mc-vitrina-otra.mc-lista { opacity: 1; }
  .mc-tarjeta:hover .mc-con-otra:has(.mc-vitrina-otra.mc-lista) > img:not(.mc-vitrina-otra) { opacity: 0; }
  .mc-tarjeta:hover .mc-vitrina > img { transform: scale(1.04); }
}
.mc-sello {
  position: absolute; top: var(--mc-e2); left: var(--mc-e2); z-index: 1; padding: 4px 9px; border-radius: var(--mc-r-pildora);
  font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: .02em; white-space: nowrap;
  background: rgba(22, 21, 20, .06); color: var(--mc-texto-2);
}
.mc-sello--oferta { background: var(--mc-acento); color: #fff; }             /* el único en acento: es dinero */
.mc-sello--vendido { background: var(--mc-tinta); color: #fff; }
.mc-sello--nuevo { background: #fff; color: var(--mc-acento); box-shadow: inset 0 0 0 1px rgba(31, 116, 128, .35); }
/* Campaña de portada (eb-campana.php): píldora de vidrio limpia, arriba a la derecha de la vitrina.
   Misma receta que .mc-ligero; el difuminado de alrededor es jade, nada sólido. Quieta. */
.mc-sello.mc-sello--estreno {
  top: var(--mc-e3); right: var(--mc-e3); left: auto; display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 14px 7px 13px; border-radius: var(--mc-r-pildora); color: var(--mc-acento);
  background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .52));
  -webkit-backdrop-filter: blur(16px) saturate(180%);
          backdrop-filter: blur(16px) saturate(180%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .75),
    inset 0 1px 0 #fff,
    0 0 0 1px color-mix(in oklab, var(--mc-acento) 14%, transparent),
    0 6px 22px -4px rgba(78, 203, 217, .42),
    0 2px 10px -2px color-mix(in oklab, var(--mc-acento) 28%, transparent);
}
.mc-sello--estreno .mc-sello-num { font-size: 22px; font-weight: 600; line-height: 1; letter-spacing: -.02em; color: var(--mc-acento); }
.mc-sello--estreno .mc-sello-num small { font-size: .6em; font-weight: 500; letter-spacing: 0; margin-left: 1px; }
.mc-sello--estreno .mc-sello-txt { padding-left: 9px; border-left: 1px solid color-mix(in oklab, var(--mc-acento) 22%, transparent); font-size: 10px; font-weight: 700; line-height: 1.15; letter-spacing: .1em; text-transform: uppercase; color: var(--mc-texto-2); }
/* Sobre la foto oscura del banner, el vidrio un poco más claro para que el texto se lea igual */
.mc-campana .mc-sello--estreno { background: linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .7)); }
/* En el banner, arriba a la izquierda como el sello del carrusel, un poco más compacto para no tapar los vasos */
.mc-campana .mc-sello.mc-sello--estreno { top: var(--mc-e2); left: var(--mc-e2); right: auto; gap: 7px; padding: 5px 11px 5px 10px; }
.mc-campana .mc-sello--estreno .mc-sello-num { font-size: 18px; }
.mc-campana .mc-sello--estreno .mc-sello-txt { padding-left: 7px; font-size: 9px; }
/* Banner de la campaña: marco de vidrio, panel blanco con la foto y el texto en el pie. Celular: columna; escritorio: foto a la izquierda. */
.mc-campana-marco { box-sizing: border-box; }
.mc-campana .mc-campana-panel { flex: none; height: clamp(190px, 54vw, 280px); }
.mc-campana .mc-campana-panel > img { inset: 0; margin: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 55%; }
.mc-campana-cuerpo { display: flex; flex-direction: column; align-items: flex-start; gap: var(--mc-e3); padding: var(--mc-e3) var(--mc-e2) var(--mc-e2); }
.mc-campana-cuerpo .mc-h2 { max-width: 22ch; }
.mc-campana-cuerpo .mc-lede { max-width: 42ch; }
.mc-campana-cuerpo .mc-boton { margin-top: var(--mc-e1); }
@media (min-width: 1024px) {
  .mc-campana-marco { flex-direction: row; align-items: stretch; }
  .mc-campana .mc-campana-panel { flex: 0 0 46%; height: auto; min-height: 340px; }
  .mc-campana-cuerpo { flex: 1; justify-content: center; gap: var(--mc-e4); padding: var(--mc-e4) var(--mc-e5); }
}
/* Ficha de IsaShake: la bienvenida, discreta, junto al precio */
.mc-campana-bienvenida { margin: var(--mc-e2) 0 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--mc-acento); }
/* Ficha: la etiqueta va junto al precio (no en la esquina de la foto) */
.mc-ficha-precio-fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mc-e2) var(--mc-e3); }
.mc-ficha-precio-fila .mc-sello { position: static; font-size: 12px; padding: 5px 11px; }
.mc-mundo a.mc-compra-pregunta { align-self: center; font-size: 14px; }
.mc-solo-ancho { display: none; }
.mc-solo-angosto { width: 100%; }

/* Recompra privada: píldora en escritorio, tarjeta quieta y legible en celular. */
.mc-recompra { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--mc-e3); padding: var(--mc-e4); border-radius: var(--mc-r-panel); align-items: center; }
.mc-recompra .mc-recompra-foto { width: 52px; height: 52px; border-radius: 50%; }
.mc-recompra-texto p { margin: 0 0 var(--mc-e1); font-size: 15px; line-height: 1.4; font-weight: 600; }
.mc-recompra form { grid-column: 1 / -1; margin: 0; }
.mc-recompra button { width: 100%; white-space: normal; line-height: 1.3 !important; }
.mc-paq-ahorro { color: var(--mc-acento); }
@media (min-width: 1024px) {
  .mc-recompra { grid-template-columns: 60px minmax(0, 1fr) auto; padding: var(--mc-e3) var(--mc-e4) var(--mc-e3) var(--mc-e3); border-radius: var(--mc-r-pildora); gap: var(--mc-e4); }
  .mc-recompra .mc-recompra-foto { width: 60px; height: 60px; }
  .mc-recompra-texto p { font-size: 17px; }
  .mc-recompra form { grid-column: auto; }
}

/* Bloque destacado (paquetes) */
.mc-destacado { padding: var(--mc-e5) var(--mc-e4); display: grid; gap: var(--mc-e5); }
.mc-destacado-texto { display: flex; flex-direction: column; gap: var(--mc-e3); align-items: flex-start; }
.mc-destacado-texto .mc-boton { margin-top: var(--mc-e2); }
.mc-destacado-fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mc-e3); }

/* Testimonios: se deslizan; el siguiente asoma */
.mc-testimonios {
  display: flex; gap: var(--mc-e3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 calc(-1 * var(--mc-margen)) calc(-1 * var(--mc-e6)); padding: var(--mc-e2) var(--mc-margen) var(--mc-e7);
  scroll-padding-inline: var(--mc-margen);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--mc-e4), #000 calc(100% - var(--mc-e5)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--mc-e4), #000 calc(100% - var(--mc-e5)), transparent 100%);
}
.mc-testimonio { flex: none; width: 300px; box-sizing: border-box; padding: var(--mc-e4); scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--mc-e3); }
.mc-testimonio .mc-nota { font-size: 14px; font-weight: 600; }

/* Membresía y preguntas */
.mc-dos { display: grid; gap: var(--mc-e6); }
.mc-miembros { display: flex; flex-direction: column; gap: var(--mc-e3); align-items: flex-start; }
.mc-miembros .mc-boton { margin-top: var(--mc-e2); }
.mc-preguntas .mc-h2 { margin-bottom: var(--mc-e3); }
.mc-pregunta summary { list-style: none; cursor: pointer; }
.mc-pregunta summary::-webkit-details-marker { display: none; }
.mc-mas { font-size: 21px; font-weight: 400; transition: transform .3s var(--mc-curva-layout); }
.mc-pregunta[open] .mc-mas { transform: rotate(45deg); }
.mc-pregunta:last-child { border-bottom: 1px solid var(--mc-filete); }
.mc-respuesta { padding: 0 0 var(--mc-e4); font-size: 15px; line-height: 1.6; color: var(--mc-texto-2); max-width: 60ch; }
.mc-respuesta a { color: var(--mc-acento) !important; text-decoration: underline !important; text-underline-offset: 3px; }

@media (min-width: 768px) {
  .mc-productos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mc-e4); }
  .mc-solo-ancho { display: inline-flex; }
  .mc-solo-angosto { display: none; }
  .mc-testimonio { width: 340px; padding: var(--mc-e5) var(--mc-e4) var(--mc-e4); }
}

@media (min-width: 1024px) {
  .mc-portada { --mc-alto-amanecer: 900px; --mc-halo-ancho: 760px; --mc-halo-alto: 560px; --mc-luz-radio: 420px; }
  .mc-heroe {
    grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "texto carrusel" "confianza confianza";
    column-gap: var(--mc-e6); row-gap: var(--mc-e5); align-items: center; min-height: 560px;
  }
  .mc-heroe-texto { gap: var(--mc-e4); padding-top: 0; align-self: center; }
  .mc-confianza { align-self: start; margin-top: 0; }
  .mc-carrusel { margin: 0 calc(-1 * var(--mc-margen)) calc(-1 * var(--mc-e6)) calc(-1 * var(--mc-e5)); padding: var(--mc-e2) var(--mc-margen) var(--mc-e7) var(--mc-e6); scroll-padding-left: var(--mc-e6); --mc-borde-suave: var(--mc-e6); }
  .mc-diapositiva { width: 440px; scroll-snap-align: start; }
  .mc-diapositiva .mc-vitrina { height: 380px; }
  .mc-diapositiva-nombre { font-size: 16px; }
  .mc-carrusel-control { justify-content: flex-start; padding-left: var(--mc-e4); }
  .mc-carrusel-control .mc-flecha { display: grid; }
  .mc-contador { display: inline; font-weight: 600; letter-spacing: .08em; }
  .mc-puntos { display: none; }
  .mc-chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; -webkit-mask-image: none; mask-image: none; }
  .mc-productos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mc-destacado { padding: var(--mc-e6); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mc-e6); align-items: center; }
  .mc-dos { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .mc-testimonio { width: 360px; }
}

/* ======================================= BARRA FIJA DE COMPRA (ficha y carrito) */
/* Celular y tableta: cuando el botón de compra sale de la pantalla, queda a la mano. */
.mc-compra-fija {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; pointer-events: none;
  padding: 0 var(--mc-e3) calc(var(--mc-e3) + env(safe-area-inset-bottom, 0px));
  transform: translateY(calc(100% + var(--mc-e4))); visibility: hidden;
  transition: transform .5s var(--mc-curva-layout), visibility 0s linear .5s;
}
.mc-compra-fija.mc-visible { transform: none; visibility: visible; transition: transform .5s var(--mc-curva-layout), visibility 0s; }
.mc-compra-fija-dentro {
  pointer-events: auto; max-width: 560px; margin: 0 auto; box-sizing: border-box;
  display: flex; align-items: center; gap: var(--mc-e3); padding: var(--mc-e2) var(--mc-e2) var(--mc-e2) var(--mc-e4); border-radius: var(--mc-r-pildora);
}
.mc-compra-fija-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mc-compra-fija-nombre { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-compra-fija .mc-precio { font-size: 15px; }
.mc-compra-fija .mc-boton { flex: none; min-height: 48px; padding: 0 var(--mc-e4); }
@media (prefers-reduced-motion: reduce) { .mc-compra-fija, .mc-compra-fija.mc-visible { transition: none; } }

@media (min-width: 1024px) { .mc-compra-fija { display: none; } }

/* ============================================= CONTINUIDAD (el movimiento) */
/* Un solo principio en todo el sitio: lo que no cambia no se vuelve a pintar,
   lo que cambia se asienta, y la marca de "estás aquí" se desliza de donde
   estabas a donde vas. Nunca se mueve nada solo. Ver SISTEMA.md "Continuidad". */
@keyframes mc-asienta { from { opacity: 0; transform: translateY(8px); } }
@keyframes mc-baja    { from { opacity: 0; transform: translateY(-8px); } }
@keyframes mc-sale    { to { opacity: 0; } }
.mc-asienta { animation: mc-asienta .45s var(--mc-curva-entrada) both; }
.mc-menu:not([hidden]) { animation: mc-baja .35s var(--mc-curva-entrada) both; }

/* La pieza que se desliza (eb-inicio.js → mcPildora) */
.mc-con-guia { position: relative; }
.mc-con-guia > :not(.mc-guia) { position: relative; z-index: 1; }
.mc-guia {
  position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none; opacity: 0; border-radius: var(--mc-r-pildora);
  transition: transform .45s var(--mc-curva-layout), width .45s var(--mc-curva-layout), height .45s var(--mc-curva-layout), opacity .25s ease;
}
.mc-guia.mc-sin-transicion { transition: opacity .25s ease; }
.mc-guia--relleno { background: var(--mc-tinta); }
.mc-guia--ligero { background: rgba(255,255,255,.72); box-shadow: inset 0 0 0 1px rgba(255,255,255,.85), 0 5px 13px -8px rgba(22,21,20,.25); }
.mc-guia--aro { z-index: 2; background: none; border-radius: var(--mc-r-campo); box-shadow: inset 0 0 0 2px var(--mc-tinta); }
.mc-nav-lista.mc-con-guia > li > a { padding-left: var(--mc-e3); padding-right: var(--mc-e3); }
.mc-nav-lista.mc-con-guia { gap: var(--mc-e2); }

/* Preguntas, cupón e indicaciones: se despliegan, no aparecen de golpe (donde el navegador puede) */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  details::details-content { block-size: 0; overflow: clip; transition: block-size .4s var(--mc-curva-layout), content-visibility .4s allow-discrete; }
  details[open]::details-content { block-size: auto; }
}

/* Entre páginas: SIN transición animada. Safari y Opera pintaban vacía la captura de la barra y
   parpadeaba. Sin ella, el navegador deja la página anterior a la vista hasta que la nueva ya está
   pintada completa (barra incluida): el cambio se siente quieto en todos los navegadores. */
/* Aparecer (SISTEMA §7): sube 12 px y se asienta, 420 ms. La clase que esconde la pone el JS
   (data-mc-aparece), así sin JavaScript todo se ve. */
.mc-aparece { opacity: 0; transform: translateY(12px); }
.mc-aparecio { opacity: 1; transform: none; transition: opacity .42s ease, transform .42s var(--mc-curva-entrada); }

@media (prefers-reduced-motion: reduce) {
  .mc-asienta, .mc-menu { animation: none !important; }
  .mc-guia { transition: none !important; }
  details::details-content { transition: none !important; }
}

/* ================================================================== PIE */

.mc-pie { padding: var(--mc-e6) 0 var(--mc-e5); background: transparent; }
/* El borde entre el mundo y el pie suele caer en fracción de píxel: esa fila no la cubre ninguno
   entero y se asomaba el cielo del fondo (una línea). El pie se monta 1 px sobre el mundo. */
body.home .mc-pie, body.mc-con-cielo .mc-pie { position: relative; margin-top: -1px; }
.mc-pie-dentro { display: flex; flex-direction: column; gap: var(--mc-e5); padding-top: var(--mc-e5); border-top: 1px solid var(--mc-filete); }
.mc-pie-marca { display: flex; flex-direction: column; gap: var(--mc-e3); align-items: flex-start; }
.mc-pie-grupos { display: flex; flex-wrap: wrap; gap: var(--mc-e5) var(--mc-e6); }
.mc-pie-grupo { display: flex; flex-direction: column; gap: var(--mc-e3); font-size: 14px; }
.mc-pie-grupo .mc-rotulo { color: var(--mc-texto-3); }
.mc-pie-grupo a { min-height: 24px; }
body.home .mc-pie { background: var(--mc-suelo); }
@media (min-width: 1024px) {
  .mc-pie-dentro { flex-direction: row; justify-content: space-between; align-items: flex-start; }
  .mc-pie-grupos { gap: var(--mc-e7); }
}

/* ======================================================== BLINDAJE (tema) */
/* El tema envuelve todo en .wrap con overflow: hidden. Eso convierte la caja en
   "contenedor de desplazamiento" y lo fijo (sticky) se mide contra ella y no contra
   la pantalla: el menú de la cuenta, el resumen del pago y la foto de la ficha
   bailaban. clip recorta igual sin ese efecto. */
body .wrap { overflow: clip !important; }
/* El plugin Menu Bar Cart mete "0 productos – $0" en el menú: la barra ya
   tiene su icono de carrito. */
.mc-nav-lista [class*="wpmenucart"], .mc-menu-lista [class*="wpmenucart"] { display: none !important; }
/* El tema pinta todos los <button> de verde: el principal es turquesa, como en todo el sistema. */
.mc-mundo button.mc-boton--principal {
  background: var(--mc-acento) !important; color: #fff !important; border: 0 !important; border-radius: var(--mc-r-pildora) !important;
  padding: 0 var(--mc-e4) !important; font: 600 16px/1.2 var(--mc-fuente) !important; text-transform: none !important; letter-spacing: 0 !important;
  box-shadow: 0 13px 34px -21px rgba(31,116,128,.9) !important; cursor: pointer;
}
.mc-mundo button.mc-boton--principal:hover { background: var(--mc-acento-hover) !important; color: #fff !important; }
/* "a { color: inherit }" del mundo le ganaba al blanco (y al pasar el cursor lo volvía turquesa sobre turquesa). */
.mc-mundo a.mc-boton--principal, .mc-mundo a.mc-boton--principal:hover, .mc-compra-fija a.mc-boton--principal { color: #fff; }
/* El tema pinta todos los <button> de verde: los de contorno también son del sistema. */
.mc-mundo button.mc-boton--contorno {
  background: transparent !important; color: var(--mc-tinta) !important; border: 0 !important; border-radius: var(--mc-r-pildora) !important;
  box-shadow: inset 0 0 0 1px rgba(22,21,20,.22) !important; padding: 0 var(--mc-e4) !important; min-height: 48px;
  font: 600 15px/1 var(--mc-fuente) !important; text-transform: none !important; letter-spacing: 0 !important;
}
.mc-mundo button.mc-boton--contorno:hover { background: rgba(255,255,255,.6) !important; box-shadow: inset 0 0 0 1px rgba(22,21,20,.42) !important; color: var(--mc-tinta) !important; }
/* El tema pinta todos los <button> de verde: aquí mandan los materiales. */
.mc-mundo button.mc-ligero, .mc-cabecera-marco button.mc-ligero {
  background: rgba(255,255,255,.5) !important; color: var(--mc-tinta) !important; border: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), inset 0 1px 0 #fff, 0 1px 2px rgba(22,21,20,.05) !important;
}
.mc-mundo button.mc-ligero:hover { background: rgba(255,255,255,.75) !important; }
.mc-cabecera-marco button.mc-icono:not(.mc-ligero) { background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--mc-tinta) !important; }
/* Foco con teclado en los íconos de la barra: un canto fino de acento, no el anillo grueso de eb-tokens. */
.mc-cabecera-marco .mc-icono:focus { outline: none !important; }
.mc-cabecera-marco .mc-icono:focus-visible { outline: none !important; box-shadow: inset 0 0 0 1.5px rgba(31,116,128,.55) !important; }
/* El tema dibuja las citas en un recuadro con comillas: un testimonio es texto. */
.mc-mundo blockquote.mc-texto {
  border: 0 !important; padding: 0 !important; margin: 0 !important; background: none !important;
  font-style: normal !important; font-size: 16px !important; line-height: 1.6 !important; color: var(--mc-tinta) !important; quotes: none;
}
.mc-mundo blockquote.mc-texto::before, .mc-mundo blockquote.mc-texto::after { content: none !important; display: none !important; }
/* Escritorio: la vitrina que asoma llega hasta el borde de la pantalla. */
@media (min-width: 1024px) {
  .mc-carrusel { margin-right: calc(-1 * (var(--mc-margen) + max(0px, (100vw - var(--mc-ancho)) / 2))); }
}
/* Con trackpad o ratón el carril corre libre, con su propia inercia; al
   detenerse, eb-inicio.js lo posa suave en la tarjeta más cercana. El encaje
   del navegador cortaba el impulso y lo regresaba de golpe. Queda solo para
   el dedo en celular, donde se siente natural. */
@media (hover: hover) and (pointer: fine) {
  .mc-carrusel, .mc-testimonios { scroll-snap-type: none; }
}
/* WooCommerce da tamaño a todas las imágenes de sus páginas: el logo manda aquí. */
.mc-cabecera-marco .mc-logo img.mc-logo-img, .mc-pie .mc-logo-img {
  height: 30px !important; width: auto !important; max-width: none !important; max-height: none !important; margin: 0 !important;
}
@media (min-width: 1024px) { .mc-cabecera-marco .mc-logo img.mc-logo-img { height: 34px !important; } }

/* Lo que exigen Isagenix y la ley (quién opera el sitio, la leyenda de suplementos): discreto, legible. */
.mc-pie-legal { margin: var(--mc-e5) 0 0; padding-top: var(--mc-e3); border-top: 1px solid var(--mc-filete); font-size: 12.5px; line-height: 1.55; color: var(--mc-texto-3); max-width: 90ch; }
.mc-compra-legal { margin: 0; font-size: 12px; line-height: 1.5; color: var(--mc-texto-3); }
/* Portada: un solo mundo hasta el pie. Los halos se desvanecen al final del mundo (sin corte) y el pie
   tiene su propia luz que sigue al cursor, sobre el mismo suelo. */
body.home .mc-mundo > .mc-aurora { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 520px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 520px), transparent); }
body.home .mc-pie { overflow: hidden; isolation: isolate; }
body.home .mc-pie > .mc-luz { z-index: -1; }
@media (min-width: 1024px) { body.home .mc-pie { --mc-luz-radio: 420px; } }   /* la misma luz que en el resto de la portada */
/* Portada: el mundo se funde con el pie, sin línea. Un velo del color del suelo cubre el final del mundo
   (debajo del contenido) y el pie comparte ese suelo. */
body.home .mc-mundo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 480px; pointer-events: none; z-index: 0; background: linear-gradient(180deg, transparent, var(--mc-suelo)); }
body.home .mc-mundo > .mc-contenido { z-index: 1; }
body.home .mc-mundo > .mc-luz { z-index: 1; }   /* la luz pasa por encima del velo: llega continua hasta el pie */