/* ============================================================
   Amarantha · Animaciones sutiles (femeninas, sin cansar la vista)
   Cargado desde Website Settings.head_html (amarantha-anim.css).
   Regla de seguridad: las animaciones SOLO se activan si <html>
   tiene la clase .amx-anim (la agrega amarantha-anim.js). Si el JS
   falla o el usuario pide menos movimiento, todo se ve normal.
   ============================================================ */

/* --- Entrada suave de los bloques del tope (se inyectan al cargar) --- */
html.amx-anim .amx-hero  { animation: amxFadeUp .6s ease both; }
html.amx-anim .amx-trust { animation: amxFadeUp .6s .1s ease both; }

/* --- Reveal al hacer scroll (lo dispara el IntersectionObserver) --- */
html.amx-anim .amx-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
  will-change: opacity, transform;
}
html.amx-anim .amx-reveal.amx-reveal-in {
  opacity: 1;
  transform: none;
}

/* --- Flotado suave de los círculos decorativos del hero --- */
html.amx-anim .amx-hero::after { animation: amxFloat 7s ease-in-out infinite; }
html.amx-anim .amx-hero::before { animation: amxFloat 9s ease-in-out infinite reverse; }

/* --- Pulso sutil en el botón principal del hero --- */
html.amx-anim .amx-btn-white { animation: amxGlow 3.4s ease-in-out infinite; }

/* --- Zoom suave en las fotos al pasar el cursor --- */
html.amx-anim .amx-card-img img,
html.amx-anim .item-card .card-img,
html.amx-anim .category-card .card-img-top {
  transition: transform .5s ease;
}
html.amx-anim .amx-card:hover .amx-card-img img,
html.amx-anim .item-card:hover .card-img,
html.amx-anim .category-card:hover .card-img-top {
  transform: scale(1.05);
}

/* --- Keyframes --- */
@keyframes amxFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes amxFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes amxGlow {
  0%, 100% { box-shadow: 0 8px 20px rgba(0,0,0,.18); }
  50%      { box-shadow: 0 8px 28px rgba(247,125,192,.55); }
}

/* --- Respeto a quien pide menos movimiento --- */
@media (prefers-reduced-motion: reduce) {
  html.amx-anim * { animation: none !important; transition: none !important; }
  html.amx-anim .amx-reveal { opacity: 1 !important; transform: none !important; }
}


/* --- Banner promocional (portada) --- */
.amx-banner { display:block; margin:2rem 0; border-radius:24px; overflow:hidden; box-shadow:0 12px 34px rgba(85,71,177,.16); text-decoration:none; }
.amx-banner img { width:100%; height:auto; display:block; transition:transform .4s ease; }
.amx-banner:hover img { transform:scale(1.02); }


/* --- Cómo comprar (3 pasos) --- */
.amx-como-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.amx-como-item { position: relative; background: #fff; border-radius: 18px; padding: 1.7rem 1.2rem 1.3rem; box-shadow: 0 3px 14px rgba(42,36,64,.07); text-align: center; }
.amx-como-num { position: absolute; top: .8rem; left: .9rem; width: 30px; height: 30px; border-radius: 50%; background: #5547B1; color: #fff; font-weight: 700; font-size: .95rem; display: flex; align-items: center; justify-content: center; }
.amx-como-ico { display: block; font-size: 2rem; margin: .3rem 0 .5rem; }
.amx-como-item h3 { font-family: 'Playfair Display', Georgia, serif; font-size: 1.12rem; font-weight: 600; color: #2A2440; margin: 0 0 .35rem; }
.amx-como-item p { color: #918AA8; font-size: .88rem; line-height: 1.45; margin: 0; }

/* --- Promo enriquecida --- */
.amx-promo-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.1rem; flex-wrap: wrap; text-align: left; }
.amx-promo-txt h3 { font-family: 'Playfair Display', Georgia, serif; font-size: 1.5rem; margin: 0 0 .3rem; color: #fff; }
.amx-promo-txt p { font-size: .9rem; opacity: .95; margin: 0; }
.amx-promo-pagos { display: flex; gap: .5rem; flex-wrap: wrap; }
.amx-promo-pagos span { background: rgba(255,255,255,.2); border-radius: 999px; padding: .42rem .85rem; font-size: .85rem; font-weight: 600; }
.amx-promo-btn { background: #fff; color: #C86BC0 !important; border-radius: 999px; padding: .7rem 1.3rem; font-weight: 700; font-size: .92rem; text-decoration: none !important; white-space: nowrap; }
.amx-promo-btn:hover { background: #FFE7F4; }

/* --- Footer en columnas --- */
.amx-foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; align-items: start; }
.amx-foot-brand p { color: #9C93B8; font-size: .85rem; line-height: 1.5; margin: .7rem 0 0; max-width: 250px; }
.amx-foot-col h4 { font-family: 'Playfair Display', Georgia, serif; font-size: 1rem; color: #fff; margin: 0 0 .55rem; }
.amx-foot-col a { display: block; color: #CFC9E0 !important; text-decoration: none; font-size: .86rem; padding: .22rem 0; }
.amx-foot-col a:hover { color: #fff !important; }

@media (max-width: 768px) {
  .amx-como-grid { grid-template-columns: 1fr; }
  .amx-promo-inner { flex-direction: column; align-items: flex-start; }
  .amx-foot-grid { grid-template-columns: 1fr; gap: 1.4rem; }
}


/* --- Fix: el footer no se encoja (sticky footer de Frappe usa height:100% + flex) --- */
footer.web-footer { flex-shrink: 0 !important; height: auto !important; }


/* --- Mobile-first: mejor compra en celular --- */
@media (max-width: 768px) {
  .amx-hero-cta { flex-direction: column; }
  .amx-hero-cta .amx-btn { width: 100%; justify-content: center; padding: .9rem 1rem; font-size: 1rem; }
  .amx-card-cta { padding: .65rem; font-size: .92rem; }
  /* en la ficha, la barra sticky reemplaza a los botones flotantes */
  body.amx-product-page .am-cart-fab,
  body.amx-product-page .wa-float { display: none !important; }
}


/* ============================================================
   NAVBAR QUE ACOMPAÑA EL SCROLL + MENÚ DE HAMBURGUESA DE MARCA
   (16/10/2026 · lo pidió Kd: "en Bluescreen el logo y el menú de
   hamburguesa baja contigo en la página, ¿puede hacerse eso en
   Amarantha?" → sí, y con el mismo aire de la tienda)

   · El navbar queda PEGADO arriba (sticky) con fondo crema traslúcido:
     el corazón y el menú acompañan todo el recorrido.
   · El botón de menú son 3 barras que se cruzan en X al abrir.
   · El panel entra como tarjeta blanca con el aire de la marca y los
     enlaces caen en cascada.

   ⚠️ El tema de Frappe carga DESPUÉS de este archivo → todo va con `html`
      delante para ganar por especificidad (misma regla que el resto).
   ⚠️ Si amarantha-nav.js no carga, la tienda sigue igual de funcional:
      Bootstrap abre el panel con su icono viejo. Esto solo mejora.
   ============================================================ */

html .navbar.navbar-expand-lg {
  position: sticky;
  top: 0;
  z-index: 1030;
  /* ⚠️ el tema pinta el navbar con `background: var(--am-cream) !important`
     (custom_scss), por eso hace falta el !important acá para el efecto cristal */
  background: rgba(251, 248, 255, .88) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid rgba(85, 71, 177, .10);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}

/* Aire a los costados: Frappe deja el contenedor del navbar en `padding: 0`, así que
   el corazón y el botón de menú quedaban pegados al borde de la pantalla (y la
   píldora del menú se cortaba). Se alinea con el margen del resto de la página. */
html .navbar.navbar-expand-lg > .container {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* --- Botón de menú: píldora de 3 barras que se vuelven X --- */
html .navbar-toggler {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  /* aire respecto del carrito: antes el borde de la píldora quedaba pegado al ícono
     (16/10/2026, lo notó Kd) */
  margin-left: .5rem;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(85, 71, 177, .26) !important;
  transition: background .3s ease, border-color .3s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
html .navbar-toggler:hover { background: #fff; border-color: rgba(85, 71, 177, .5) !important; }
html .navbar-toggler:active { transform: scale(.94); }
/* el icono viejo del tema (se quita desde amarantha-nav.js) */
html .navbar-toggler > span:not(.amx-bar) { display: none !important; }
html .navbar-toggler .amx-bar {
  position: absolute;
  left: 50%;
  height: 2px;
  width: 20px;
  margin-left: -10px;
  border-radius: 2px;
  background: linear-gradient(90deg, #5547B1, #C86BC0);
  transition: transform .4s cubic-bezier(.6,.2,.1,1), opacity .25s ease, width .3s ease;
}
html .navbar-toggler .amx-bar:nth-child(1) { transform: translateY(-6px); }
html .navbar-toggler .amx-bar:nth-child(3) { transform: translateY(6px); width: 13px; }
html .navbar-toggler[aria-expanded="true"] {
  background: linear-gradient(135deg, #5547B1, #C86BC0);
  border-color: transparent !important;
}
html .navbar-toggler[aria-expanded="true"] .amx-bar { background: #fff; }
html .navbar-toggler[aria-expanded="true"] .amx-bar:nth-child(1) { transform: rotate(45deg); }
html .navbar-toggler[aria-expanded="true"] .amx-bar:nth-child(2) { opacity: 0; transform: scaleX(.2); }
html .navbar-toggler[aria-expanded="true"] .amx-bar:nth-child(3) { transform: rotate(-45deg); width: 20px; }

/* --- Panel del menú (celular y tablet, < 992px) --- */
@keyframes amxPanelIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes amxLinkIn  { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

@media (max-width: 991px) {
  html .navbar-collapse {
    margin: .55rem 0 .2rem;
    padding: .3rem 1.05rem .95rem;
    background: #fff;
    border: 1px solid rgba(85, 71, 177, .12);
    border-radius: 16px;
    box-shadow: 0 24px 46px -28px rgba(85, 71, 177, .55);
  }
  html .navbar-collapse.show { animation: amxPanelIn .4s cubic-bezier(.2,.8,.2,1) both; }

  html .navbar-collapse .navbar-nav { margin-left: 0 !important; margin-right: 0 !important; }
  html .navbar-collapse .navbar-nav .nav-item { border-bottom: 1px solid rgba(85, 71, 177, .08); }
  html .navbar-collapse .navbar-nav:last-child .nav-item:last-child { border-bottom: 0; }

  html .navbar-collapse .nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .9rem .15rem;
    font-weight: 600;
    color: #5547B1;
  }
  html .navbar-collapse .nav-link::after {
    content: "→";
    color: #C86BC0;
    opacity: 0;
    transform: translateX(-5px);
    transition: opacity .25s ease, transform .25s ease;
  }
  html .navbar-collapse .nav-link:hover::after,
  html .navbar-collapse .nav-link:focus::after { opacity: 1; transform: none; }

  /* la entrada de los enlaces, en cascada (solo al abrir el menú) */
  html .navbar-collapse.show .navbar-nav .nav-item { animation: amxLinkIn .42s cubic-bezier(.2,.8,.2,1) both; }
  html .navbar-collapse.show .navbar-nav:nth-of-type(1) .nav-item:nth-child(1) { animation-delay: .08s; }
  html .navbar-collapse.show .navbar-nav:nth-of-type(1) .nav-item:nth-child(2) { animation-delay: .14s; }
  html .navbar-collapse.show .navbar-nav:nth-of-type(2) .nav-item:nth-child(1) { animation-delay: .20s; }
  html .navbar-collapse.show .navbar-nav:nth-of-type(2) .nav-item:nth-child(2) { animation-delay: .26s; }
  html .navbar-collapse.show .navbar-nav:nth-of-type(2) .nav-item:nth-child(3) { animation-delay: .32s; }

  /* "Iniciar sesión" como acción secundaria (píldora de ancho completo), no como un
     enlace más de la lista */
  html .navbar-collapse .nav-link.btn-login-area {
    width: 100%;
    justify-content: center;
    margin: .75rem 0 .15rem;
    border-radius: 999px;
    background: rgba(85, 71, 177, .07);
    border: 1px solid rgba(85, 71, 177, .16);
  }
  html .navbar-collapse .nav-link:hover { color: #C86BC0; }
  html .navbar-collapse .nav-link.btn-login-area::after { content: none; }
}

/* "menos movimiento": el menú se abre igual, sin animaciones */
@media (prefers-reduced-motion: reduce) {
  html .navbar-collapse.show,
  html .navbar-collapse.show .navbar-nav .nav-item,
  html .navbar-toggler .amx-bar { animation: none !important; transition: none !important; }
}

/* footer: aire horizontal (el contenedor original se quitó) */
.amx-foot { padding: 0 18px; box-sizing: border-box; }


/* ============================================================
   GSAP (amarantha-gsap.js) — split-text del hero, banner y la línea
   que se dibuja en "¿Cómo comprar?".
   Todo esto solo aplica si gsap.min.js + ScrollTrigger.min.js cargaron:
   si no, <html> no tiene .amx-gsap y aquí no pasa nada.
   ============================================================ */

/* --- La entrada del hero la maneja GSAP (palabra por palabra) --- */
html.amx-gsap .amx-hero { animation: none; }

/* --- Split-text: la "ventana" (.amx-w) y la palabra (.amx-wi) ---
   El padding + el margen negativo evitan que el overflow:hidden corte las letras
   que bajan (p, g, j) ni la inclinación de la itálica del <em>. */
html.amx-gsap .amx-hero-title .amx-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0 .06em .16em;
  margin: 0 -.06em -.16em;
}
html.amx-gsap .amx-hero-title .amx-wi { display: inline-block; will-change: transform; }

/* --- La línea que se dibuja (la inserta el JS antes de la grilla) --- */
.amx-como-track {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: #EFE9F8;
  margin: 0 0 1.15rem;
  overflow: hidden;
}
.amx-como-fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  transform: scaleX(0);            /* el JS la lleva a 1 con el scroll */
  transform-origin: left center;
  background: linear-gradient(90deg, #5547B1 0%, #C86BC0 55%, #F77DC0 100%);
}

/* --- Cada paso se enciende cuando la línea lo alcanza --- */
.amx-como-item .amx-como-num { transition: background .45s ease, box-shadow .45s ease; }
html.amx-anim .amx-como-item.amx-reveal {
  transition: opacity .55s ease, transform .55s ease, box-shadow .45s ease;
}
.amx-como-item.amx-como-on { box-shadow: 0 8px 22px rgba(85, 71, 177, .14); }
.amx-como-item.amx-como-on .amx-como-num {
  background: linear-gradient(135deg, #5547B1, #F77DC0);
  box-shadow: 0 4px 12px rgba(200, 107, 192, .36);
}


/* ============================================================
   EFECTOS "CHIC" EN LOS PRODUCTOS (pedido de Kd · 15/10/2026)
   Se aplican SOLO si <html> tiene .amx-anim (lo pone amarantha-anim.js), así que
   quien pide menos movimiento no ve nada de esto. Los selectores van con
   html.amx-anim delante porque el CSS del tema se carga DESPUÉS y si no
   perdería la pelea por especificidad.
   ============================================================ */

/* ---------- 1. Destello que recorre la foto (se ve también en celular) ---------- */
html.amx-anim .item-card .card-img-container,
html.amx-anim .amx-card-img { position: relative; overflow: hidden; }

html.amx-anim .item-card .card-img-container::after,
html.amx-anim .amx-card-img::after {
  content: ""; position: absolute; top: -10%; bottom: -10%; left: -65%; width: 42%;
  background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.62) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-18deg); pointer-events: none; opacity: 0; z-index: 3;
  animation: amxShine 7.5s ease-in-out infinite;
}
/* destellos escalonados: que no brillen todas a la vez */
html.amx-anim .item-card:nth-child(4n+2) .card-img-container::after,
html.amx-anim .amx-card:nth-child(4n+2) .amx-card-img::after { animation-delay: 1.7s; }
html.amx-anim .item-card:nth-child(4n+3) .card-img-container::after,
html.amx-anim .amx-card:nth-child(4n+3) .amx-card-img::after { animation-delay: 3.4s; }
html.amx-anim .item-card:nth-child(4n) .card-img-container::after,
html.amx-anim .amx-card:nth-child(4n) .amx-card-img::after { animation-delay: 5.1s; }

@keyframes amxShine {
  0%, 8%    { left: -65%; opacity: 0; }
  12%       { opacity: 1; }
  24%       { left: 135%; opacity: 0; }
  26%       { left: -65%; opacity: 0; }   /* 2ª pasada, sin que se note el salto */
  30%       { opacity: 1; }
  44%, 100% { left: 135%; opacity: 0; }
}

/* ---------- 2. Velo rosado sobre la foto (aparece al pasar el cursor) ---------- */
html.amx-anim .item-card .card-img-container::before,
html.amx-anim .amx-card-img::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(247,125,192,0) 40%, rgba(85,71,177,.30) 100%);
  opacity: 0; transition: opacity .35s ease;
}

/* ---------- 3. Hover (solo donde hay cursor de verdad) ---------- */
@media (hover: hover) and (pointer: fine) {
  html.amx-anim .item-card .card-img,
  html.amx-anim .amx-card-img img,
  html.amx-anim .category-card .card-img-top { transition: transform .55s cubic-bezier(.2,.8,.2,1); }

  html.amx-anim .item-card:hover,
  html.amx-anim .amx-card:hover {
    transform: translateY(-6px) scale(1.012);
    box-shadow: 0 18px 40px rgba(200,107,192,.30), 0 6px 18px rgba(85,71,177,.18);
  }
  html.amx-anim .item-card:hover .card-img,
  html.amx-anim .amx-card:hover .amx-card-img img,
  html.amx-anim .category-card:hover .card-img-top { transform: scale(1.07); }

  html.amx-anim .item-card:hover .card-img-container::before,
  html.amx-anim .amx-card:hover .amx-card-img::before { opacity: 1; }

  /* el botón de la tarjeta se enciende con el degradado de la marca */
  html.amx-anim .item-card:hover .btn-explore-variants,
  html.amx-anim .amx-card:hover .amx-card-cta {
    background: linear-gradient(120deg, #5547B1 0%, #C86BC0 100%) !important;
    box-shadow: 0 8px 18px rgba(200,107,192,.35);
  }

  /* el precio hace un guiño */
  html.amx-anim .item-card:hover .product-price,
  html.amx-anim .amx-card:hover .amx-price {
    transform: translateX(3px); text-shadow: 0 0 14px rgba(247,125,192,.5);
  }

  /* la tarjeta de categoría: anillo degradado y el ícono hace un salto */
  html.amx-anim .amx-cat:hover .amx-cat-ic { transform: scale(1.14) rotate(-7deg); }
  html.amx-anim .amx-cat::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .3s ease; pointer-events: none;
  }
  html.amx-anim .amx-cat:hover::after { box-shadow: inset 0 0 0 1.5px rgba(200,107,192,.5); }
}

html.amx-anim .amx-cat { position: relative; }
html.amx-anim .amx-cat-ic { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
html.amx-anim .amx-card-cta,
html.amx-anim .btn-explore-variants { transition: background .3s ease, box-shadow .3s ease, color .3s ease; }
html.amx-anim .product-price, html.amx-anim .amx-price { transition: transform .3s ease, text-shadow .3s ease; }

/* ---------- 3b. Modo LISTA (el que ve la clienta en el celular) ---------- */
html.amx-anim .products-list .list-image {
  position: relative; overflow: hidden;
  border-color: rgba(200,107,192,.22) !important;
  box-shadow: 0 4px 14px rgba(85,71,177,.10);
  transition: box-shadow .3s ease, border-color .3s ease;
}
/* el destello también recorre la miniatura de la lista */
html.amx-anim .products-list .list-image::after {
  content: ""; position: absolute; top: -10%; bottom: -10%; left: -65%; width: 55%;
  background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.72) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-18deg); pointer-events: none; opacity: 0; z-index: 3;
  animation: amxShine 7.5s ease-in-out infinite;
}
html.amx-anim .products-list .list-image::-moz-selection { background: transparent; }
html.amx-anim .products-list .list-image img { transition: transform .55s cubic-bezier(.2,.8,.2,1); }

@media (hover: hover) and (pointer: fine) {
  html.amx-anim .products-list .list-row:hover .list-image {
    border-color: rgba(247,125,192,.55) !important;
    box-shadow: 0 8px 22px rgba(200,107,192,.28);
  }
  html.amx-anim .products-list .list-row:hover .list-image img { transform: scale(1.08); }
  html.amx-anim .products-list .list-row:hover .product-price { text-shadow: 0 0 14px rgba(247,125,192,.55); }
  html.amx-anim .products-list .list-row:hover .btn-explore-variants {
    background: linear-gradient(120deg, #5547B1 0%, #C86BC0 100%) !important;
    color: #fff !important; box-shadow: 0 8px 18px rgba(200,107,192,.35);
  }
  html.amx-anim .products-list .list-row:hover .col-8 a { color: #5547B1 !important; }
}

/* ---------- 4. Ficha de producto: marco con anillo rosa + zoom ---------- */
html.amx-anim .product-container .product-image {
  position: relative;
  border-color: rgba(200,107,192,.28) !important;
  animation: amxHalo 5.5s ease-in-out infinite;
}
html.amx-anim .product-container .product-image img { transition: transform .6s cubic-bezier(.2,.8,.2,1); }
@media (hover: hover) and (pointer: fine) {
  html.amx-anim .product-container .product-image:hover img { transform: scale(1.06); }
}

/* el marco de la foto respira: el anillo rosa se enciende y se apaga */
@keyframes amxHalo {
  0%, 100% { box-shadow: 0 0 0 1px rgba(200,107,192,.18), 0 16px 38px rgba(85,71,177,.16); }
  50%      { box-shadow: 0 0 0 2px rgba(247,125,192,.5), 0 18px 46px rgba(200,107,192,.3); }
}

/* el botón de comprar late suave cuando se puede usar */
html.amx-anim .product-container .amx-agregar:not(:disabled) { animation: amxGlow 3.4s ease-in-out infinite; }
html.amx-anim .amx-sticky-add { background: linear-gradient(120deg, #5547B1 0%, #C86BC0 100%); }

/* ---------- 5. Chispas que flotan (las coloca amarantha-anim.js) ---------- */
html.amx-anim .amx-glint {
  position: absolute; left: var(--x, 20%); top: var(--y, 30%);
  width: 12px; height: 12px; border-radius: 50%; pointer-events: none; z-index: 3; opacity: 0;
  background: radial-gradient(circle, #fff 0%, rgba(255,214,236,.95) 40%, rgba(247,125,192,0) 74%);
  box-shadow: 0 0 10px rgba(255,255,255,.9), 0 0 24px rgba(247,125,192,.85);
  animation: amxTwinkle var(--dur, 4.6s) ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
html.amx-anim .amx-glint-chica { width: 8px; height: 8px; box-shadow: 0 0 8px rgba(255,255,255,.9), 0 0 18px rgba(247,125,192,.7); }
/* la estrella de 4 puntas: se ve incluso sobre una foto blanca */
html.amx-anim .amx-glint-estrella {
  width: 17px; height: 17px; border-radius: 0;
  background: radial-gradient(circle, #fff 0%, rgba(255,255,255,.95) 32%, rgba(247,125,192,0) 72%);
  box-shadow: 0 0 12px rgba(247,125,192,.95);
  clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%);
}

@keyframes amxTwinkle {
  0%, 100% { opacity: 0; transform: scale(.35) translateY(0); }
  30%      { opacity: 1;  transform: scale(1.15) translateY(-5px); }
  55%      { opacity: .75; transform: scale(.85) translateY(-11px); }
  75%      { opacity: 0;  transform: scale(.5) translateY(-16px); }
}

/* ---------- 6. Subrayado degradado de los títulos de sección ---------- */
html.amx-anim h2.amx-under { position: relative; }
html.amx-anim h2.amx-under::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; border-radius: 999px;
  background: linear-gradient(90deg, #5547B1 0%, #C86BC0 55%, #F77DC0 100%);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
}
html.amx-anim h2.amx-under.amx-under-on::after { transform: scaleX(1); }

/* ---------- 7. Sombra del navbar al bajar (la dispara amarantha-anim.js)
   Desde el 16/10 el navbar es `sticky` (ver bloque de arriba): al bajar se le
   sube un poco el fondo y se le pone sombra para que se lea "por encima". */
html .navbar.am-nav-scrolled {
  background: rgba(251, 248, 255, .96) !important;
  box-shadow: 0 10px 26px -14px rgba(85, 71, 177, .38) !important;
  border-bottom: 1px solid rgba(200, 107, 192, .20);
}

/* ---------- 8. Marca del navbar: el corazón + el nombre (16/10/2026) ----------
   El 15/10 el navbar quedó solo con el corazón porque el logo horizontal con las
   letras se veía diminuto. Ahora el nombre vuelve, pero como TEXTO (no dentro de la
   imagen) en la tipografía real de la marca: Playfair Display, el mismo violeta.
   El nombre va en `brand_html` (Website Settings) → lo ve Google, no es decorativo. */
html .navbar-brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-left: 0;          /* antes .35rem: quedaba desalineado con el borde derecho */
}
html .navbar-brand img {
  max-height: 42px !important;
  width: auto !important;
  border-radius: 8px;
  transition: transform .25s ease;
}
html .navbar-brand:hover img { transform: scale(1.05); }
html .navbar-brand .amx-marca {
  font-family: 'Playfair Display', 'Times New Roman', serif;
  font-size: clamp(1.1rem, 5.4vw, 1.4rem);   /* achica en pantallas chicas (320 px) */
  font-weight: 600;
  color: #5547B1;
  letter-spacing: .2px;
  line-height: 1;
  white-space: nowrap;
}
/* Celulares muy chicos (320-360 px): el nombre completo necesita un poco menos de todo
   para no empujar los iconos fuera de la pantalla. */
@media (max-width: 360px) {
  html .navbar-brand .amx-marca { font-size: 1rem; }
  html .navbar-brand img { max-height: 36px !important; }
  html .navbar-expand-lg > .container { padding-left: .7rem; padding-right: .7rem; }
  html .navbar-toggler { width: 40px; height: 40px; margin-left: .35rem; }
}


/* ============================================================
   PACK A · JOYERÍA  +  PACK C · REACCIÓN AL DEDO  +  PACK D · PORTADA VIVA
   (elegidos por Kd el 15/10/2026)
   ============================================================ */

/* --- El ángulo giratorio: lo usan el bisel de las tarjetas y el anillo de la ficha.
       Si el navegador no soporta @property, queda un borde degradado fijo (igual se ve bien). --- */
@property --amx-ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes amxGirar { to { --amx-ang: 360deg; } }

@media (hover: hover) and (pointer: fine) {
  /* PACK A · bisel: al pasar el cursor, un degradado recorre el borde de la tarjeta */
  html.amx-anim .amx-card { position: relative; }
  html.amx-anim .amx-card::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 4;
    padding: 1.5px;
    background: conic-gradient(from var(--amx-ang, 0deg), #5547B1, #F77DC0, #FFE9F6, #C86BC0, #5547B1);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity .35s ease;
  }
  html.amx-anim .amx-card:hover::after { opacity: 1; animation: amxGirar 5s linear infinite; }
}

/* PACK A · el marco de la foto de la ficha: anillo iridiscente que gira lento */
html.amx-anim .product-container .product-image::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  padding: 2.5px;
  background: conic-gradient(from var(--amx-ang, 0deg), #5547B1, #F77DC0, #FFFFFF, #C86BC0, #5547B1);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: amxGirar 11s linear infinite;
}

/* PACK A · el precio de la ficha respira con un brillo rosa
   (ojo con el nombre real: .am-precio-ficha, no .amx-precio-ficha) */
html.amx-anim .product-container .am-precio-ficha,
html.amx-anim .product-container .item-cart .product-price { animation: amxPrecio 4.6s ease-in-out infinite; }
@keyframes amxPrecio {
  0%, 100% { text-shadow: none; }
  50%      { text-shadow: 0 0 18px rgba(247,125,192,.6); }
}

/* PACK D · portada viva: el degradado del hero se mueve solo (aurora) */
html.amx-gsap .amx-hero {
  background-size: 220% 220%;
  animation: amxAurora 22s ease-in-out infinite;
}
@keyframes amxAurora {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* PACK D · "¿Cómo comprar?": el ícono de cada paso late cuando la línea lo alcanza */
html.amx-anim .amx-como-item.amx-como-on .amx-como-ico { animation: amxLatido 1.8s ease-in-out infinite; }
@keyframes amxLatido {
  0%, 100% { transform: scale(1); }
  45%      { transform: scale(1.18); }
}

/* PACK C · reacción al dedo ------------------------------------------------- */

/* 1) Agregar al carrito: el botón se pone verde y sale una onda */
html.amx-anim .amx-btn-agregado {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, #12b76a 0%, #37d67a 100%) !important;
  color: #fff !important;
  animation: amxPop .5s cubic-bezier(.2,.8,.2,1);
}
html.amx-anim .amx-btn-agregado, html.amx-anim .amx-btn-agregado span { color: #fff !important; }
@keyframes amxPop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
html.amx-anim .amx-onda {
  position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: 999px; background: radial-gradient(circle, rgba(255,255,255,.85), rgba(247,125,192,0));
  pointer-events: none; animation: amxOnda .75s ease-out forwards;
}
@keyframes amxOnda {
  from { transform: scale(.5); opacity: .6; }
  to   { transform: scale(3.4); opacity: 0; }
}

/* 2) El carrito rebota y el contador hace pop */
html.amx-anim .amx-rebote { animation: amxRebote .65s cubic-bezier(.2,.8,.2,1); }
@keyframes amxRebote {
  0%, 100% { transform: scale(1) rotate(0); }
  40%      { transform: scale(1.28) rotate(-9deg); }
}
html.amx-anim .amx-nav-badge.amx-pop { animation: amxBadge .55s cubic-bezier(.2,.8,.2,1); }
@keyframes amxBadge {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.75); }
  100% { transform: scale(1); }
}

/* 3) Botones de color: al elegir, anillo rosa y fondo suave */
html.amx-anim button.amx-color { transition: box-shadow .25s ease, background .25s ease; }
html.amx-anim button.amx-color.amx-sel {
  background: #FDE8F5 !important;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #F77DC0;
  font-weight: 700;
}
html.amx-anim .amx-cant-box button { transition: transform .12s ease; }
html.amx-anim .amx-cant-box button:active { transform: scale(.86); }

/* 4) El visor de la foto, con marco rosa de la marca */
html.amx-anim .image-zoom-view { background: rgba(42, 36, 64, .9) !important; }
html.amx-anim .image-zoom-view img {
  border-radius: 18px;
  box-shadow: 0 0 0 3px rgba(247,125,192,.8), 0 24px 60px rgba(0,0,0,.55);
}
html.amx-anim .image-zoom-view .close { color: #fff !important; }

/* 5) El pedido: la prenda que entra se desliza con un halo rosa (es donde mira la clienta
      cuando el panel del pedido se abre solo al agregar). */
html.amx-anim .am-cart-item { animation: amxItemIn .55s cubic-bezier(.2,.8,.2,1); }
@keyframes amxItemIn {
  0%   { opacity: 0; transform: translateX(16px) scale(.98);
         box-shadow: 0 0 0 2px rgba(247,125,192,.55), 0 3px 12px rgba(42,36,64,.07); }
  60%  { opacity: 1; transform: none;
         box-shadow: 0 0 0 3px rgba(247,125,192,.45), 0 3px 12px rgba(42,36,64,.07); }
  100% { opacity: 1; transform: none; }
}

/* El aviso flotante "Agregado a tu pedido ✓", con los colores de la marca */
html.amx-anim .am-cart-toast {
  background: linear-gradient(120deg, #5547B1 0%, #C86BC0 100%) !important;
  border-radius: 999px !important;
  padding: .72rem 1.25rem !important;
  font-weight: 700 !important;
  box-shadow: 0 10px 26px rgba(200,107,192,.45) !important;
}

/* ============================================================
   PÁGINA DE CATEGORÍA VACÍA → VITRINA (arreglo 2) + bloque fantasma (arreglo 4)
   ============================================================ */

/* El mensaje seco de Frappe no se borra: se esconde cuando hay vitrina o cuando la
   página sí tiene productos (arreglo 4, lo decide amarantha-anim.js). */
html.amx-anim .cart-empty[data-amx-oculto="1"] { display: none !important; }

.amx-vacio {
  background: #fff; border-radius: 20px; padding: 1.6rem 1.2rem 1.8rem;
  box-shadow: 0 8px 26px rgba(85,71,177,.10); text-align: center; margin-top: 1rem;
}
.amx-vacio-emoji { font-size: 2.6rem; line-height: 1; margin-bottom: .4rem; display: inline-block;
  animation: amxFloat 6s ease-in-out infinite; }
.amx-vacio-tit { font-family: 'Playfair Display', Georgia, serif; font-size: 1.45rem; color: #2A2440; margin: 0 0 .5rem; }
.amx-vacio-tit em { color: #C86BC0; font-style: italic; }
.amx-vacio-sub { color: #918AA8; font-size: .92rem; line-height: 1.5; margin: 0 0 1.3rem; }
.amx-vacio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; text-align: left; }
.amx-vacio-cta { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: 1.4rem; }
.amx-vacio-btn {
  display: inline-flex; align-items: center; gap: .4rem; border-radius: 999px; padding: .8rem 1.3rem;
  font-weight: 700; font-size: .92rem; text-decoration: none !important;
  background: linear-gradient(120deg, #5547B1, #C86BC0); color: #fff !important;
  box-shadow: 0 8px 20px rgba(200,107,192,.3);
}
.amx-vacio-btn:hover { transform: translateY(-2px); }
.amx-vacio-btn-wa { background: linear-gradient(120deg, #25D366, #1eb457); box-shadow: 0 8px 20px rgba(37,211,102,.32); }
.amx-vacio-btn, .amx-vacio-btn-wa { transition: transform .2s ease; }
@media (min-width: 768px) {
  .amx-vacio { padding: 2.2rem 2rem; }
  .amx-vacio-grid { grid-template-columns: repeat(4, 1fr); }
  .amx-vacio-tit { font-size: 1.8rem; }
}


/* ============================================================
   MUÑECO DEL PEDIDO (tipo Totoro) + botón "Comprar" en los listados
   Pedido de Kd (15/10/2026). Tres poses: sentado · parado · bailando.
   El SVG lo arma amarantha-extra.js y ahí se pone data-estado.
   ============================================================ */

/* --- botón para los productos SIN variantes (el tema los dejaba sin acción) --- */
.amx-btn-comprar { display: inline-block; }

/* --- el muñeco --- */
.amx-muneco {
  position: relative; display: flex; align-items: center; gap: .6rem;
  background: linear-gradient(120deg, #FDF6FF 0%, #FFF3FA 100%);
  border: 1px solid #F1E3FA; border-radius: 16px;
  padding: .5rem .7rem; margin-bottom: .8rem; overflow: hidden; min-height: 86px;
}
.amx-muneco-caja { position: relative; width: 78px; height: 76px; flex: none; }
.amx-muneco svg { width: 100%; height: 100%; overflow: visible; }
.amx-muneco svg * { transform-box: fill-box; transform-origin: center; }
.amx-muneco-frase { font-size: .84rem; font-weight: 700; color: #5547B1; line-height: 1.25; position: relative; z-index: 2; }
.amx-muneco[data-estado="sentado"] .amx-muneco-frase { font-weight: 600; color: #918AA8; }

/* colores del muñeco: gris con panza crema y marcas en V (los del original) */
.amx-mu-cuerpo { fill: #98A1A8; }
.amx-mu-oreja { fill: #98A1A8; stroke: #848D94; stroke-width: 1; }
.amx-mu-barriga { fill: #F1E9D8; }
.amx-mu-marca { fill: none; stroke: #AEB6BC; stroke-width: 2.4; stroke-linecap: round; }
.amx-mu-ojo { fill: #fff; stroke: #6E767E; stroke-width: 1; }
.amx-mu-pupila { fill: #2A2440; }
.amx-mu-brillo { fill: #fff; }
.amx-mu-nariz { fill: #4A5058; }
.amx-mu-bigote { fill: none; stroke: #6E767E; stroke-width: 1.5; stroke-linecap: round; }
.amx-mu-boca { fill: none; stroke: #4A5058; stroke-width: 1.8; stroke-linecap: round; }
.amx-mu-boca-abierta { fill: #8A5F73; opacity: 0; }
.amx-mu-mejilla { fill: #FBC9E4; opacity: 0; }
.amx-mu-brazo, .amx-mu-pie { fill: #8B939A; }
.amx-mu-sombra { fill: rgba(85,71,177,.13); opacity: 0; }
.amx-muneco .amx-mu-ojo, .amx-muneco .amx-mu-pie, .amx-muneco .amx-mu-oreja,
.amx-muneco .amx-mu-cuerpo-grupo, .amx-muneco .amx-mu-brazos-posado { transition: transform .3s ease; }

/* --- poses --- */
.amx-mu-patitas, .amx-mu-brazos-arriba { display: none; }
.amx-muneco[data-estado="parado"] .amx-mu-patitas,
.amx-muneco[data-estado="bailando"] .amx-mu-patitas { display: block; }
.amx-muneco[data-estado="bailando"] .amx-mu-brazos-posado { display: none; }
.amx-muneco[data-estado="bailando"] .amx-mu-brazos-arriba { display: block; }

/* SENTADO: se achata contra el piso, patitas recogidas, brazos sobre la barriga */
.amx-muneco[data-estado="sentado"] .amx-mu-cuerpo-grupo { transform: translateY(15px) scaleY(.8); transform-origin: bottom center; }
.amx-muneco[data-estado="sentado"] .amx-mu-brazos-posado { transform: translateY(14px); }
.amx-muneco[data-estado="sentado"] .amx-mu-sombra { opacity: 1; }
.amx-muneco[data-estado="sentado"] .amx-mu-oreja.o-izq { transform: rotate(-11deg); }
.amx-muneco[data-estado="sentado"] .amx-mu-oreja.o-der { transform: rotate(11deg); }
.amx-muneco[data-estado="sentado"] .amx-mu-ojo { transform: scaleY(.86); }
.amx-muneco[data-estado="sentado"] .amx-mu-pupila { transform: translateY(1.2px); }

/* PARADO: quieto, respirando bajito */
.amx-muneco[data-estado="parado"] svg { animation: amxRespirar 3s ease-in-out infinite; transform-origin: bottom center; }

/* BAILANDO: brazos arriba, patita levantada y el cuerpo contoneando */
.amx-muneco[data-estado="bailando"] svg { animation: amxBailar 1.15s ease-in-out infinite; transform-origin: bottom center; }
.amx-muneco[data-estado="bailando"] .amx-mu-pie.der { transform: rotate(20deg) translateY(-8px); }
.amx-muneco[data-estado="bailando"] .amx-mu-oreja.o-izq { animation: amxOrejaIzq .6s ease-in-out infinite alternate; }
.amx-muneco[data-estado="bailando"] .amx-mu-oreja.o-der { animation: amxOrejaDer .6s ease-in-out infinite alternate; }
.amx-muneco[data-estado="bailando"] .amx-mu-boca { opacity: 0; }
.amx-muneco[data-estado="bailando"] .amx-mu-boca-abierta { opacity: 1; }
.amx-muneco[data-estado="bailando"] .amx-mu-mejilla { opacity: 1; }
.amx-muneco[data-estado="bailando"] .amx-mu-brillo { display: none; }   /* ojos achinaos de contento */

@keyframes amxBailar {
  0%, 100% { transform: rotate(-7deg) translateY(0); }
  25%      { transform: rotate(0deg) translateY(-4px); }
  50%      { transform: rotate(7deg) translateY(0); }
  75%      { transform: rotate(0deg) translateY(-4px); }
}
@keyframes amxRespirar {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.025); }
}
@keyframes amxOrejaIzq { from { transform: rotate(-6deg); } to { transform: rotate(7deg); } }
@keyframes amxOrejaDer { from { transform: rotate(6deg); } to { transform: rotate(-7deg); } }

/* el globito de "!" */
.amx-muneco-globo {
  position: absolute; top: 6px; left: 64px; z-index: 3;
  background: #F77DC0; color: #fff; font-weight: 800; font-size: .72rem;
  border-radius: 999px; padding: .06rem .42rem; line-height: 1.5;
  opacity: 0; transform: scale(.4) rotate(-12deg);
  transition: opacity .2s ease, transform .28s cubic-bezier(.2,.8,.2,1);
}
.amx-muneco[data-n="3"] .amx-muneco-globo,
.amx-muneco[data-n="4"] .amx-muneco-globo,
.amx-muneco[data-n="5"] .amx-muneco-globo { opacity: 1; transform: scale(1) rotate(-8deg); }
.amx-muneco[data-n="5"] .amx-muneco-globo { transform: scale(1.15) rotate(-8deg); }

/* las estrellitas, solo cuando baila */
.amx-estrella {
  display: none; position: absolute; width: 12px; height: 12px; background: #FFC9E8; z-index: 1;
  clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%);
  animation: amxTwinkle 3.6s ease-in-out infinite;
}
.amx-estrella.e1 { top: 2px; right: 8px; }
.amx-estrella.e2 { top: 26px; right: 30px; width: 9px; height: 9px; animation-delay: .7s; }
.amx-estrella.e3 { bottom: 6px; right: 12px; animation-delay: 1.3s; }
.amx-muneco[data-estado="bailando"] .amx-estrella { display: block; }

/* el saltito cada vez que cambia la cantidad */
.amx-muneco.amx-pop .amx-muneco-caja { animation: amxMunecoPop .6s cubic-bezier(.2,.8,.2,1); }
@keyframes amxMunecoPop {
  0%   { transform: scale(1) rotate(0); }
  40%  { transform: scale(1.14) rotate(-3deg); }
  70%  { transform: scale(.97) rotate(2deg); }
  100% { transform: scale(1) rotate(0); }
}


/* ============================================================
   ATRACTIVO (15/10/2026, 4ª tanda) — lo pedido por Kd
   1) Vitrina de fotos dentro del hero (la primera pantalla muestra prendas)
   2) Listado en cuadrícula real de 2 columnas en celular
   3) Bloque de confianza en la ficha del producto
   ============================================================ */

/* --- 1) Vitrina del hero --- */
.amx-hero-vitrina { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: 1.15rem; }
.amx-hero-vitrina a { display: block; line-height: 0; }
.amx-hero-vitrina img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px;
  border: 2px solid rgba(255,255,255,.24); box-shadow: 0 10px 24px rgba(16, 8, 36, .3);
  transition: transform .3s ease, box-shadow .3s ease;
}
.amx-hero-vitrina a:hover img { transform: translateY(-3px) scale(1.02); box-shadow: 0 16px 30px rgba(16, 8, 36, .38); }
.amx-hero-vitrina-cap {
  margin: .55rem 0 0; font-size: .74rem; letter-spacing: .3px;
  color: rgba(255,255,255,.85); text-transform: uppercase;
}
@media (min-width: 768px) {
  .amx-hero-vitrina { max-width: 540px; gap: .8rem; margin-top: 1.6rem; }
}

/* --- 2) Listado: cuadrícula de 2 columnas en celular --- */
@media (max-width: 767px) {
  /* El contenedor de la vista de cuadrícula es el segundo .products-list (el primero es la lista).
     ⚠️ Va con :not(.hidden): si no, se muestra la cuadrícula aunque la clienta eligió lista
     y los productos aparecen DOS veces en la página. */
  .products-list.mt-minus-1:not(.hidden) {
    display: grid !important;
    width: 100% !important; max-width: 100% !important;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin-left: .5rem !important; margin-right: .5rem !important;
    align-items: stretch;
  }
  .products-list.mt-minus-1 > .item-card {
    flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    padding-left: 0 !important; padding-right: 0 !important; margin: 0 !important;
    display: flex;
  }
  .products-list.mt-minus-1 .card {
    width: 100%; height: 100%; border: none; border-radius: 16px; overflow: hidden;
    background: #fff; box-shadow: 0 4px 16px rgba(85,71,177,.10);
    display: flex; flex-direction: column;
  }
  .products-list.mt-minus-1 .card-img-container { padding: 0; margin: 0; background: #FDF7FC; }
  .products-list.mt-minus-1 .card-img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
  .products-list.mt-minus-1 .card-body { padding: .55rem .6rem .7rem; display: flex; flex-direction: column; flex: 1; }
  .products-list.mt-minus-1 .card-body > div { margin-top: 0 !important; }
  .products-list.mt-minus-1 .card-body > a { margin-top: auto; display: block; text-decoration: none !important; }
  .products-list.mt-minus-1 .product-title {
    font-family: 'Playfair Display', Georgia, serif; font-size: .88rem; line-height: 1.22; color: #2A2440;
    margin: 0 0 .15rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 2.15em;
  }
  .products-list.mt-minus-1 .product-category {
    font-size: .66rem; color: #A79FB8; text-transform: uppercase; letter-spacing: .4px; margin-bottom: .15rem;
  }
  .products-list.mt-minus-1 .product-price { color: #5547B1; font-weight: 800; font-size: .98rem; margin: .1rem 0 .55rem; }
  .products-list.mt-minus-1 .btn-explore-variants {
    /* ⚠️ El tema deja estos botones con visibility:hidden en la vista de cuadrícula (venía
       de antes: por eso la cuadrícula se veía vacía y el listado entraba en modo lista).
       En la cuadrícula sí se muestran: llevan a la ficha del producto, igual que en la lista. */
    visibility: visible !important;
    margin-top: 0 !important; width: 100%; font-size: .78rem; padding: .48rem .5rem; border: none;
    border-radius: 999px; background: linear-gradient(120deg, #5547B1 0%, #C86BC0 100%); color: #fff;
    box-shadow: 0 6px 16px rgba(200,107,192,.28); font-weight: 700;
  }
  .products-list.mt-minus-1 .amx-btn-comprar .btn-explore-variants { margin-top: 0 !important; }
  /* la lista (filas) mantiene su comportamiento cuando ella la elige a mano */
}

/* --- 3) Bloque de confianza en la ficha --- */
.amx-ficha-confia {
  display: grid; grid-template-columns: 1fr; gap: .55rem; margin: 1rem 0 .3rem;
  background: #FDF7FC; border: 1px solid #F1E3FA; border-radius: 16px; padding: .85rem .95rem;
}
.amx-fc-item { display: flex; gap: .6rem; align-items: flex-start; }
.amx-fc-item > span { font-size: 1.05rem; line-height: 1.25; flex: none; }
.amx-fc-item b { display: block; font-size: .83rem; color: #2A2440; line-height: 1.3; }
.amx-fc-item small { font-size: .76rem; color: #8F87A3; line-height: 1.35; }
.amx-fc-item small a { color: #5547B1; font-weight: 700; text-decoration: none; }
@media (min-width: 768px) { .amx-ficha-confia { grid-template-columns: 1fr 1fr; gap: .7rem 1rem; padding: 1rem; } }

/* --- 3b) Síguenos en Instagram (dentro del bloque de confianza, fila completa) --- */
.amx-ficha-ig {
  grid-column: 1 / -1; display: flex; gap: .6rem; align-items: flex-start;
  margin-top: .1rem; padding-top: .7rem; border-top: 1px solid #F1E3FA;
}
.amx-ficha-ig > span { font-size: 1.05rem; line-height: 1.25; flex: none; }
.amx-ficha-ig b { display: block; font-size: .83rem; color: #2A2440; line-height: 1.3; }
.amx-ficha-ig small { font-size: .76rem; color: #8F87A3; line-height: 1.35; }
.amx-ficha-ig small a { color: #5547B1; font-weight: 700; text-decoration: none; }
.amx-ficha-ig small a:hover { text-decoration: underline; }