/* ============================================================
   Nutrición Activa — carrito de compra
   Sin tokens propios: consume los que cada página declara en su
   :root (--jade, --flame, --paper, --ink, --line, --muted…) y los
   de movimiento y escala móvil que vienen de craft.css.

   Orden del archivo: primero TODAS las reglas base, después los
   bloques @media. Una @media escrita antes de su regla base queda
   muerta sin avisar y no hay error que lo delate.

   Capas: la burbuja va en 130 —encima de la cabecera fija (120) y
   de la barra de compra móvil (80)—; el panel en 210, encima del
   lightbox (200), porque es lo último que se abre.
   ============================================================ */

/* ============================================================
   1. BURBUJA FLOTANTE
   Solo existe cuando hay algo dentro. Un carrito vacío no merece
   ocupar una esquina de la pantalla en todas las páginas.
   ============================================================ */
.na-fab{position:fixed;right:clamp(16px,3vw,26px);bottom:clamp(16px,3vw,26px);z-index:130;
  width:58px;height:58px;border:0;border-radius:50%;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--jade);color:var(--tile-text);
  box-shadow:0 14px 30px -12px var(--shadow),0 2px 6px -2px var(--shadow-soft);
  opacity:0;transform:scale(.6) translateY(12px);pointer-events:none;
  transition:opacity var(--t-state) ease,transform var(--t-move) var(--ease-out),
    background-color var(--t-state) ease}
.na-fab.is-on{opacity:1;transform:none;pointer-events:auto}
.na-fab svg{width:25px;height:25px}
.na-fab:hover{background:var(--jade-dark)}
.na-fab:active{transform:scale(.94)}
.na-fab:focus-visible{outline:3px solid var(--jade-light);outline-offset:3px}

.na-fab-n{position:absolute;top:-3px;right:-3px;min-width:23px;height:23px;padding:0 6px;
  display:flex;align-items:center;justify-content:center;border-radius:999px;
  background:var(--color-cta);color:#FFFFFF;border:2.5px solid var(--paper);
  font-family:Archivo,system-ui,sans-serif;font-size:12px;font-weight:800;line-height:1}

/* ============================================================
   2. PANEL
   ============================================================ */
.na-cart{position:fixed;inset:0;z-index:210;display:flex;justify-content:flex-end}
/* display:flex gana sobre el [hidden]{display:none} del navegador: sin esta
   linea el velo cerrado sigue ocupando la pantalla y se come TODOS los clics
   del sitio, sin pintar nada que lo delate. Misma trampa que ya esquiva
   .lightbox[hidden] en craft.css. */
.na-cart[hidden]{display:none}
.na-veil{position:absolute;inset:0;background:var(--veil,rgba(20,22,26,.65));
  opacity:0;transition:opacity var(--t-move) ease}
.na-cart.is-open .na-veil{opacity:1}

.na-box{position:relative;display:flex;flex-direction:column;
  width:min(430px,100%);max-height:100%;background:var(--paper);
  box-shadow:-18px 0 44px -24px var(--shadow);
  transform:translateX(100%);transition:transform var(--t-move) var(--ease-drawer)}
.na-cart.is-open .na-box{transform:none}

.na-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:20px var(--pad-x);border-bottom:1px solid var(--line)}
.na-head h2{margin:0;font-family:'Archivo Black',Archivo,sans-serif;font-size:20px;
  letter-spacing:-.015em;color:var(--ink)}
/* cuántas piezas lleva, al lado del título: "Tu carrito (2)" */
.na-head-n{margin-left:6px;font-family:Figtree,system-ui,sans-serif;font-size:15px;
  font-weight:700;letter-spacing:0;color:var(--muted);font-variant-numeric:tabular-nums}
.na-x{width:var(--tap);height:var(--tap);flex:none;display:flex;align-items:center;
  justify-content:center;border:0;border-radius:12px;background:transparent;
  color:var(--ink);cursor:pointer;transition:background-color var(--t-state) ease}
.na-x svg{width:20px;height:20px}
.na-x:hover{background:var(--paper-alt)}
.na-x:focus-visible{outline:3px solid var(--jade-light);outline-offset:-2px}

/* el scroll vive aquí, no en el panel: la cabecera y el pie se quedan
   quietos mientras la lista corre */
.na-body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:6px var(--pad-x) 10px}

.na-vacio{margin:0;padding:44px 0;text-align:center;
  font-family:Figtree,system-ui,sans-serif;font-size:14.5px;color:var(--muted)}

/* ============================================================
   3. LÍNEA DE PRODUCTO
   ============================================================ */
.na-item{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:13px;
  align-items:start;padding:16px 0;border-bottom:1px solid var(--line)}
.na-item:last-child{border-bottom:0}

.na-th{position:relative;width:72px;height:72px;flex:none;border-radius:13px;overflow:hidden;
  background:var(--paper-alt);display:flex;align-items:center;justify-content:center}
.na-th img{width:100%;height:100%;object-fit:contain}
/* el kit: el segundo producto en la esquina de la foto de la Colosal,
   con un filo de papel para que se lea como pieza aparte */
.na-th .na-th2{position:absolute;right:4px;bottom:4px;width:30px;height:30px;
  border-radius:8px;object-fit:cover;background:var(--ink);box-shadow:0 0 0 2px var(--paper)}

.na-tx{min-width:0;display:flex;flex-direction:column;gap:3px}
.na-nm{font-family:Archivo,system-ui,sans-serif;font-size:14.5px;font-weight:700;
  line-height:1.35;color:var(--ink)}
/* lo elegido, un dato por renglón: "Sabor: Vainilla caramelo", o lo que
   trae el kit. El valor en tinta, la etiqueta en gris. */
.na-det{font-family:Figtree,system-ui,sans-serif;font-size:13px;line-height:1.4;color:var(--muted)}
.na-det b{font-weight:700;color:var(--ink)}
.na-pu{font-family:Figtree,system-ui,sans-serif;font-size:12.5px;color:var(--muted);margin-top:1px}

/* La línea que acaba de entrar se ilumina una vez, con un halo de jade que
   se apaga: dice "esto es lo tuyo" sin moverse de su sitio. La sombra
   extendida pinta el halo más allá del borde sin tocar el layout. */
@keyframes na-nuevo{
  0%,35%{background-color:var(--jade-bg);box-shadow:0 0 0 10px var(--jade-bg)}
  100%{background-color:transparent;box-shadow:0 0 0 10px transparent}
}
.na-item.is-nuevo{border-radius:4px;animation:na-nuevo 1.7s ease-out}

/* "Quitaste … · Deshacer": en la lista, donde está la vista */
.na-undo{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:12px 0 4px;padding:8px 8px 8px 14px;border-radius:13px;
  background:var(--ink);color:var(--tile-text);
  font-family:Figtree,system-ui,sans-serif;font-size:13.5px;font-weight:600;line-height:1.35}
.na-undo span{min-width:0}
.na-undo button{flex:none;min-height:38px;padding:0 13px;border:0;border-radius:9px;
  background:rgba(245,243,239,.12);color:var(--jade-light);cursor:pointer;
  font-family:Archivo,system-ui,sans-serif;font-size:13.5px;font-weight:800;letter-spacing:.01em;
  transition:background-color var(--t-state) ease}
.na-undo button:hover{background:rgba(245,243,239,.2)}
.na-undo button:focus-visible{outline:3px solid var(--jade-light);outline-offset:2px}

/* "Ahorras $X con el Kit de la mañana": una Colosal y un Nox o Kosmos Red
   sueltos en el carrito (carrito.js, sugerenciaKitHTML). Jade y no naranja:
   es dinero que el cliente deja de pagar, no un botón que cobra. Va arriba
   de la lista, con la cuenta entera a la vista: abajo quedaba bajo el
   pliegue del panel en un teléfono. */
.na-kit{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:12px 0 4px;padding:11px 10px 11px 14px;border-radius:13px;
  border:1px solid var(--jade-light);background:var(--jade-bg);color:var(--jade-dark);
  font-family:Figtree,system-ui,sans-serif;font-size:13px;line-height:1.4}
.na-kit-tx{margin:0;min-width:0;text-wrap:pretty}
.na-kit-tx b{display:block;font-weight:800;font-size:13.5px}
.na-kit-btn{flex:none;min-height:40px;padding:0 13px;border:0;border-radius:10px;
  background:var(--jade);color:var(--tile-text);cursor:pointer;
  font-family:Archivo,system-ui,sans-serif;font-size:13.5px;font-weight:800;letter-spacing:.01em;
  transition:background-color var(--t-state) ease,transform var(--t-press) var(--ease-out)}
.na-kit-btn:hover{background:var(--jade-dark)}
.na-kit-btn:active{transform:scale(.97)}
.na-kit-btn:focus-visible{outline:3px solid var(--jade-light);outline-offset:2px}

/* Botones de cantidad a 36 px (40 en el teléfono): a 32 el "−" y el "+"
   quedaban por debajo del mínimo táctil del sitio y se tocaba el vecino. */
.na-qty{display:flex;align-items:center;gap:2px;margin-top:7px}
.na-qty button{width:36px;height:36px;flex:none;display:flex;align-items:center;
  justify-content:center;border:1.5px solid var(--line);border-radius:9px;
  background:var(--paper);color:var(--ink);cursor:pointer;
  font-family:Archivo,system-ui,sans-serif;font-size:16px;font-weight:800;line-height:1;
  transition:border-color var(--t-state) ease,background-color var(--t-state) ease}
.na-qty button:hover{border-color:var(--jade-light);background:var(--jade-bg)}
.na-qty button:focus-visible{outline:3px solid var(--jade-light);outline-offset:2px}
.na-n{min-width:34px;text-align:center;font-family:Archivo,system-ui,sans-serif;
  font-size:14.5px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}

/* "Quitar" es texto y no un icono de bote: en una lista de tres o cuatro
   líneas, un icono repetido se lee como decoración y se pulsa por error */
.na-qty .na-del{width:auto;padding:0 11px;margin-left:8px;border-color:transparent;background:transparent;
  font-family:Figtree,system-ui,sans-serif;font-size:12.5px;font-weight:700;
  color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.na-qty .na-del:hover{border-color:transparent;background:transparent;color:var(--color-cta-ink)}

.na-sub{font-family:Archivo,system-ui,sans-serif;font-size:15px;font-weight:800;
  color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums;padding-top:1px}

/* ============================================================
   4. PIE — totales y acciones
   ============================================================ */
.na-foot{flex:none;padding:16px var(--pad-x) calc(18px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--line);background:var(--paper-alt)}
.na-foot:empty{display:none}

.na-sum{margin:0 0 14px;display:flex;flex-direction:column;gap:7px}
.na-sum div{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.na-sum dt{font-family:Figtree,system-ui,sans-serif;font-size:13.5px;color:var(--muted)}
.na-sum dd{margin:0;font-family:Archivo,system-ui,sans-serif;font-size:14.5px;font-weight:700;
  color:var(--ink);font-variant-numeric:tabular-nums}
.na-sum .na-tot{padding-top:9px;border-top:1px solid var(--line)}
.na-sum .na-tot dt{font-family:Archivo,system-ui,sans-serif;font-size:14px;font-weight:800;
  color:var(--ink)}
.na-sum .na-tot dd{font-family:'Archivo Black',Archivo,sans-serif;font-size:22px;
  font-weight:400;letter-spacing:-.015em}

/* .cta-buy y .cta-wa se heredan de producto.css en las fichas. El panel
   también vive en la portada, que no la carga, así que aquí se declara
   lo mínimo para que el botón se vea igual en las dos. */
.na-foot .cta-buy{width:100%;min-height:54px;display:flex;align-items:center;
  justify-content:center;gap:9px;border:0;border-radius:15px;background:var(--color-cta);
  color:#FFFFFF;cursor:pointer;font-family:Archivo,system-ui,sans-serif;font-size:16px;
  font-weight:800;letter-spacing:.02em;
  transition:background-color var(--t-state) ease,transform var(--t-press) var(--ease-out)}
.na-foot .cta-buy:hover:not(:disabled){background:var(--color-cta-hover)}
.na-foot .cta-buy:active:not(:disabled){transform:scale(.99)}
.na-foot .cta-buy:disabled{background:var(--paper);color:var(--muted);cursor:progress;
  border:1.5px solid var(--line)}
/* Abriendo el pago: el botón sigue siendo el naranja que se tocó, con la
   rueda girando. En gris se leía como un botón que se apagó. Vale para los
   tres botones que cobran: el del panel, el del aviso y "Comprar ahora". */
.cta-buy.is-cargando:disabled,.na-foot .cta-buy.is-cargando:disabled{
  background:var(--color-cta);color:#FFFFFF;border:0;opacity:.94;cursor:progress;box-shadow:none}
.na-foot .cta-buy:focus-visible{outline:3px solid var(--jade-light);outline-offset:3px}

.na-foot .cta-wa{margin:11px 0 0;width:100%;min-height:52px;display:flex;align-items:center;
  justify-content:center;gap:9px;border:1.5px solid var(--line);border-radius:15px;
  background:var(--paper);color:var(--ink);text-decoration:none;
  font-family:Archivo,system-ui,sans-serif;font-size:15px;font-weight:800;letter-spacing:.02em;
  transition:border-color var(--t-state) ease,background-color var(--t-state) ease}
.na-foot .cta-wa svg{width:18px;height:18px;flex:none}
.na-foot .cta-wa:hover{border-color:var(--jade-light);background:var(--jade-bg);color:var(--jade-dark)}
.na-foot .cta-wa:focus-visible{outline:3px solid var(--jade-light);outline-offset:3px}

/* ---- progreso hacia el envío gratis ----
   Informativo, no una alarma. Se usa en dos sitios con el mismo dibujo: el
   pie del panel del carrito y la caja de compra de la ficha (.bb-prog).

   El relleno avanza animado porque el cambio es la información: subir de 2
   a 3 unidades y ver la barra avanzar dice "vas por buen camino" sin una
   sola palabra. Lo anima carrito.js (animarBarra) y no una transición de
   CSS: la barra se repinta con innerHTML y un relleno recién creado no
   tiene "antes" desde el que transicionar. Cumplido el mínimo, la barra se
   vuelve una línea con palomita, y ese es todo el premio — ni confeti ni
   rebote: es un dato de envío, no un logro. */
.na-prog{margin:0 0 13px;padding:11px 13px 12px;border-radius:12px;
  background:var(--paper);border:1px solid var(--line)}
.na-prog-tx{margin:0 0 8px;font-family:Figtree,system-ui,sans-serif;font-size:12.5px;
  line-height:1.4;color:var(--muted);text-align:center}
.na-prog-tx b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}
.na-prog-rail{height:7px;border-radius:999px;background:var(--paper-alt);overflow:hidden}
.na-prog-fill{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--jade) 0%,var(--jade-light) 100%)}
.na-prog.is-ok{padding:9px 12px;border-color:var(--jade-light);background:var(--jade-bg)}
.na-prog.is-ok .na-prog-tx{margin:0;display:flex;align-items:center;justify-content:center;
  gap:7px;color:var(--jade-dark)}
.na-prog.is-ok .na-prog-tx b{color:var(--jade-dark)}
.na-prog.is-ok .na-prog-tx svg{width:16px;height:16px;flex:none;color:var(--jade)}

/* ---- también en el catálogo ----
   Va al final del cuerpo del panel, después de las líneas del pedido y
   antes del pie. Tres filas discretas: si pesaran como el botón de pagar
   competirían con él, y el trabajo de esta caja es cerrar la venta, no
   abrir otra decisión. */
.na-vacio-cta{display:flex;align-items:center;justify-content:center;
  margin:18px 0 0;min-height:var(--tap);border:2px solid var(--jade);border-radius:14px;
  background:var(--paper);color:var(--jade-dark);
  font-family:Archivo,system-ui,sans-serif;font-size:15px;font-weight:800;
  transition:background-color var(--t-state) ease,color var(--t-state) ease}
.na-vacio-cta:hover{background:var(--jade);color:var(--tile-text)}
.na-vacio-cta:focus-visible{outline:3px solid var(--jade-light);outline-offset:3px}

.na-cross{margin:18px 0 4px;padding:15px 0 0;border-top:1px solid var(--line)}
.na-cross-h{margin:0 0 10px;font-family:Figtree,system-ui,sans-serif;font-size:11px;
  font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.na-cross-it{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;
  gap:11px;padding:8px;margin:0 -8px;border-radius:12px;
  transition:background-color var(--t-state) ease}
.na-cross-it:hover{background:var(--paper-alt)}
.na-cross-it:focus-visible{outline:2.5px solid var(--jade);outline-offset:1px}
.na-cross-it .na-th{width:48px;height:48px;border-radius:10px}
.na-cross-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.na-cross-nm{font-family:Archivo,system-ui,sans-serif;font-size:14px;font-weight:800;
  color:var(--ink);line-height:1.25}
.na-cross-pi{font-family:Figtree,system-ui,sans-serif;font-size:12px;line-height:1.35;
  color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.na-cross-pz{font-family:Figtree,system-ui,sans-serif;font-size:12.5px;font-weight:700;
  color:var(--jade-dark);white-space:nowrap}

.na-tope{margin:6px 0 0;font-family:Figtree,system-ui,sans-serif;font-size:12px;
  line-height:1.45;color:var(--ink-soft,#6b6b6b)}
.na-tope a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.na-tope a:hover{color:var(--jade-dark)}
/* Línea de envío bajo el "Comprar ahora" de la ficha. La inyecta carrito.js
   justo debajo del botón. Mismo registro discreto que .na-tope: informa sin
   competir con el botón que tiene encima — si gritara, dejaría de leerse como
   un dato y empezaría a leerse como una advertencia. */
.na-envio-cta{margin:8px 0 0;font-family:Figtree,system-ui,sans-serif;font-size:12.5px;
  line-height:1.45;color:var(--muted,#6b6b6b);text-align:center}
.na-envio-cta.is-err{color:var(--color-cta-ink);font-weight:700}

.na-qty button[disabled]{opacity:.4;cursor:not-allowed}
.na-qty button[disabled]:hover{border-color:var(--line,#e4e4e4);background:transparent}
.na-nota{margin:10px 0 0;font-family:Figtree,system-ui,sans-serif;font-size:12.5px;
  line-height:1.5;color:var(--muted);text-align:center}
.na-nota.is-err{color:var(--color-cta-ink);font-weight:700}

.na-nota svg{display:inline-block;width:13px;height:13px;margin:0 5px 0 0;
  vertical-align:-2px;color:var(--jade)}

/* ---- las dos salidas que no pagan, en una fila ----
   "Seguir comprando" a la izquierda, en jade: es la salida normal. "Vaciar
   carrito" a la derecha y en gris: existe, pero no invita. Las dos en
   texto, para que ninguna compita con "Pagar". */
.na-foot-links{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 0}
.na-link{min-height:40px;padding:6px 2px;border:0;background:transparent;cursor:pointer;
  font-family:Figtree,system-ui,sans-serif;font-size:13px;font-weight:700;
  color:var(--jade-dark);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:color-mix(in srgb,currentColor 45%,transparent)}
.na-link:hover{text-decoration-color:currentColor}
.na-link.na-vaciar{color:var(--muted)}
.na-link.na-vaciar:hover{color:var(--color-cta-ink)}
.na-link:focus-visible{outline:3px solid var(--jade-light);outline-offset:2px;border-radius:6px}

/* ---- "Abriendo el pago…" ----
   La rueda gira mientras la función de Stripe contesta (hasta ~3 s en
   frío). Hereda el color del texto del botón; la separación la pone el gap
   del botón, que en los tres sitios donde sale es flex. */
@keyframes na-giro{to{transform:rotate(360deg)}}
.na-giro{display:inline-block;width:16px;height:16px;flex:none;
  border-radius:50%;border:2.2px solid currentColor;border-right-color:transparent;
  animation:na-giro .7s linear infinite}

/* ---- segunda línea bajo "Comprar ahora" cuando hay algo en el carrito ---- */
.na-envio-cart{display:block;margin-top:3px}
.na-envio-cart button{margin:-6px 0;padding:6px 2px;border:0;background:none;cursor:pointer;
  font:inherit;font-weight:700;color:var(--jade-dark);
  text-decoration:underline;text-underline-offset:2px}
.na-envio-cart button:focus-visible{outline:3px solid var(--jade-light);outline-offset:1px;border-radius:5px}

/* ============================================================
   5. BOTÓN "AGREGAR AL CARRITO" EN LA FICHA
   Secundario en peso visual: el naranja del sitio está reservado
   para el pago. Este botón mueve producto, no cobra.
   ============================================================ */
.cta-cart{margin:11px 0 0;width:100%;min-height:54px;display:flex;align-items:center;
  justify-content:center;gap:9px;border:2px solid var(--jade);border-radius:15px;
  background:var(--paper);color:var(--jade-dark);cursor:pointer;
  font-family:Archivo,system-ui,sans-serif;font-size:16px;font-weight:800;letter-spacing:.02em;
  transition:background-color var(--t-state) ease,color var(--t-state) ease,
    transform var(--t-press) var(--ease-out)}
.cta-cart svg{width:19px;height:19px;flex:none}
.cta-cart:hover:not(:disabled){background:var(--jade);color:var(--tile-text)}
.cta-cart:active:not(:disabled){transform:scale(.99)}
.cta-cart:focus-visible{outline:3px solid var(--jade-light);outline-offset:3px}
/* nace deshabilitado en el HTML y lo enciende carrito.js: sin JS no hay
   carrito, y un botón muerto es peor que ningún botón */
.cta-cart:disabled{border-color:var(--line);background:var(--paper-alt);
  color:var(--muted);cursor:not-allowed}

/* --- el mismo botón dentro de la barra fija móvil --- */
.pdp-bar .cta-cart{flex:1;margin:0;min-height:50px;font-size:15px;border-radius:14px}
.pdp-bar .cta-cart svg{width:17px;height:17px}
/* Mientras Stripe no esté conectado, "Comprar ahora" viaja deshabilitado. Dos
   botones en una barra de 360 px, uno de ellos muerto, no caben ni ayudan: en la
   barra se esconde y deja el sitio al que sí hace algo. Cuando el pago se
   encienda dejará de estar :disabled y volverá solo, sin tocar esta hoja. */
/* ...pero no mientras abre el pago: ahí también está deshabilitado, y
   esconderlo hacía desaparecer de la barra el botón que se acababa de
   tocar durante los ~3 s que tarda la función en contestar. */
.pdp-bar .cta-buy:disabled:not(.is-cargando){display:none}

/* ============================================================
   6. AVISO DE "AGREGADO"
   ============================================================ */
.na-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));
  z-index:140;max-width:min(420px,calc(100vw - 32px));
  padding:13px 18px;border-radius:14px;background:var(--ink);color:var(--tile-text);
  font-family:Figtree,system-ui,sans-serif;font-size:13.5px;font-weight:600;line-height:1.4;
  text-align:center;box-shadow:0 16px 34px -16px var(--shadow);
  opacity:0;transform:translate(-50%,14px);pointer-events:none;
  transition:opacity var(--t-state) ease,transform var(--t-move) var(--ease-out)}
.na-toast.is-on{opacity:1;transform:translate(-50%,0)}
/* Variante de error: lleva un botón, así que sí recibe el dedo. Solo
   mientras se ve: apagado vuelve a dejar pasar los toques. */
.na-toast.is-alerta{display:flex;flex-direction:column;align-items:center;gap:10px}
.na-toast.is-alerta.is-on{pointer-events:auto}
.na-toast-wa{display:inline-flex;align-items:center;justify-content:center;min-height:40px;
  padding:9px 18px;border-radius:999px;background:var(--whatsapp,#25d366);color:var(--ink);
  font-weight:800;font-size:13.5px;text-decoration:none}
.na-envio-cta.is-err a{color:inherit;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}

/* ============================================================
   6.bis  AVISO DE "AGREGADO" (lo pinta carrito.js, avisoAgregado)
   Arriba, lejos del pulgar y de los botones de compra. Papel sobre la
   página, con la sombra más honda del sitio: flota, pero no tapa nada que
   importe y no bloquea — no hay velo. En la capa 150: encima de la
   burbuja (130) y del aviso de error (140), debajo del panel (210).
   ============================================================ */
.na-add{position:fixed;z-index:150;top:calc(14px + env(safe-area-inset-top,0px));
  right:clamp(12px,3vw,26px);width:min(384px,calc(100vw - 24px));
  padding:14px 14px 12px;border-radius:18px;background:var(--paper);
  border:1px solid var(--line);
  box-shadow:0 24px 54px -20px rgba(20,22,26,.5),0 6px 16px -8px rgba(20,22,26,.22);
  opacity:0;transform:translateY(-14px) scale(.98);transform-origin:top right;
  transition:opacity 200ms ease,transform var(--t-move) var(--ease-out)}
.na-add.is-on{opacity:1;transform:none}
.na-add[hidden]{display:none}

.na-add-in{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center}
.na-add-th{position:relative;width:56px;height:56px;border-radius:12px;overflow:hidden;
  background:var(--ink);display:flex;align-items:center;justify-content:center}
.na-add-th img{width:100%;height:100%;object-fit:contain}
.na-add-th .na-th2{position:absolute;right:3px;bottom:3px;width:24px;height:24px;
  border-radius:6px;object-fit:cover;box-shadow:0 0 0 1.5px var(--paper)}
.na-add-tx{min-width:0}
.na-add-ok{display:flex;align-items:center;gap:6px;margin:0;
  font-family:Figtree,system-ui,sans-serif;font-size:11.5px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--jade-dark);line-height:1.3}
.na-add-ok svg{width:15px;height:15px;flex:none;color:var(--jade)}
.na-add-nm{margin:3px 0 0;font-family:Archivo,system-ui,sans-serif;font-size:14.5px;
  font-weight:700;line-height:1.3;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.na-add-x{align-self:start;width:38px;height:38px;margin:-8px -8px 0 0;flex:none;
  display:flex;align-items:center;justify-content:center;border:0;border-radius:10px;
  background:transparent;color:var(--muted);cursor:pointer;
  transition:background-color var(--t-state) ease,color var(--t-state) ease}
.na-add-x svg{width:18px;height:18px}
.na-add-x:hover{background:var(--paper-alt);color:var(--ink)}
.na-add-x:focus-visible{outline:3px solid var(--jade-light);outline-offset:-2px}

/* "Ver carrito" de contorno y "Pagar" lleno: el naranja, como en todo el
   sitio, solo en lo que cobra. Pagar un poco más ancho que su vecino. */
.na-add-cta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:9px;margin:13px 0 0}
.na-add-ver,.na-add .na-add-pagar{min-height:46px;margin:0;width:100%;
  display:flex;align-items:center;justify-content:center;gap:8px;
  border-radius:13px;cursor:pointer;white-space:nowrap;
  font-family:Archivo,system-ui,sans-serif;font-size:14.5px;font-weight:800;letter-spacing:.01em;
  transition:background-color var(--t-state) ease,color var(--t-state) ease,
    transform var(--t-press) var(--ease-out)}
.na-add-ver{border:1.5px solid var(--jade);background:var(--paper);color:var(--jade-dark)}
.na-add-ver:hover{background:var(--jade-bg)}
.na-add .na-add-pagar{border:0;background:var(--color-cta);color:#FFFFFF;box-shadow:none}
.na-add .na-add-pagar:hover:not(:disabled){background:var(--color-cta-hover);transform:none}
.na-add .na-add-pagar:disabled{cursor:progress;opacity:.92}
.na-add-ver:active,.na-add .na-add-pagar:active:not(:disabled){transform:scale(.98)}
.na-add-ver:focus-visible,.na-add .na-add-pagar:focus-visible{outline:3px solid var(--jade-light);outline-offset:2px}
.na-add-envio{margin:9px 0 0;font-family:Figtree,system-ui,sans-serif;font-size:12.5px;
  line-height:1.4;color:var(--muted);text-align:center}
.na-add-envio b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}
.na-add-envio.is-err{color:var(--color-cta-ink);font-weight:700}

/* ---- la miniatura que vuela del botón a la burbuja (carrito.js) ----
   Capa propia, solo transform y opacity; se borra al aterrizar. */
.na-vuelo{position:fixed;left:0;top:0;z-index:160;width:46px;height:46px;border-radius:50%;
  overflow:hidden;background:var(--ink);pointer-events:none;will-change:transform,opacity;
  box-shadow:0 0 0 2px var(--paper),0 12px 26px -10px rgba(20,22,26,.6)}
.na-vuelo img{width:100%;height:100%;object-fit:contain}

/* ---- el "✓ Agregado" del botón se dibuja ----
   La palomita se traza de izquierda a derecha y el botón da un medio
   latido: el cambio se nota aunque se mire de reojo. */
@keyframes na-trazo{to{stroke-dashoffset:0}}
@keyframes na-ok{0%{transform:scale(.97)}55%{transform:scale(1.012)}100%{transform:none}}
.cta-cart.is-ok{animation:na-ok 380ms var(--ease-out)}
.cta-cart.is-ok svg path{stroke-dasharray:22;stroke-dashoffset:22;
  animation:na-trazo 340ms var(--ease-out) 60ms forwards}

/* ============================================================
   MEDIA QUERIES — todas después de sus reglas base
   Escala del sitio: 1024 tableta · 700 compacto · 560 teléfono · 380 estrecho
   ============================================================ */

/* A ≤700 la ficha enciende su barra fija de compra. La burbuja y el aviso
   se suben por encima de ella, y solo en la ficha: carrito.js marca
   <html class="na-pdp"> cuando la página tiene [data-pdp]. El alto de la
   barra lo mide producto.js en --pdp-bar-h (ya incluye la zona segura de
   abajo); antes era un 90 px fijo y la barra, con el precio por porción en
   dos renglones, medía más: la burbuja se le montaba encima. */
@media (max-width:700px){
  .na-pdp .na-fab{bottom:calc(var(--pdp-bar-h,82px) + 12px)}
  .na-pdp .na-toast{bottom:calc(var(--pdp-bar-h,82px) + 16px)}

  .na-box{width:100%}
  .na-head{padding:16px var(--pad-x)}
  .na-head h2{font-size:18px}
}

@media (max-width:560px){
  .na-fab{width:54px;height:54px}
  .na-fab svg{width:23px;height:23px}

  /* el precio de la línea baja a su propia fila: a 360 px, tres columnas
     dejan el nombre del producto partido en una palabra por renglón */
  .na-item{grid-template-columns:60px minmax(0,1fr);gap:11px}
  .na-th{width:60px;height:60px;border-radius:11px}
  .na-th .na-th2{width:26px;height:26px;right:3px;bottom:3px}
  .na-sub{grid-column:2;justify-self:start;margin-top:-2px}
  .na-qty button{width:40px;height:40px}

  /* En la barra fija, tres piezas no caben con el texto del botón de
     agregar: se queda en icono —con su aria-label intacto— y "Comprar
     ahora" conserva su renglón. Vive aquí y no en producto.css porque la
     base de este botón está en este archivo, que carga después: la regla de
     allá perdía por orden y el icono se estiraba. */
  .pdp-bar .cta-cart{flex:0 0 52px;width:52px;padding:0;gap:0}
  .pdp-bar .cta-cart .t{display:none}

  /* el aviso de "agregado", de lado a lado y centrado arriba */
  .na-add{left:10px;right:10px;width:auto;top:calc(10px + env(safe-area-inset-top,0px));
    padding:12px 12px 11px;border-radius:16px;transform-origin:top center}
  .na-add-in{grid-template-columns:52px minmax(0,1fr) auto;gap:11px}
  .na-add-th{width:52px;height:52px}
  .na-add-nm{font-size:14px}
  .na-add-cta{margin-top:11px;gap:8px}
  .na-add-ver,.na-add .na-add-pagar{min-height:48px;font-size:14px}
}

@media (max-width:380px){
  .na-qty .na-del{margin-left:4px;padding:0 7px}
  .na-sum .na-tot dd{font-size:20px}
}

/* ---- acuse del botón "Agregar al carrito" ----
   Verde jade lleno, no naranja: el naranja sigue reservado para el pago.
   Es un acuse de recibo, no una segunda llamada a la acción. */
.cta-cart.is-ok,.cta-cart.is-ok:disabled{background:var(--jade);border-color:var(--jade);
  color:var(--tile-text);opacity:1;cursor:default}
.cta-cart.is-ok svg{width:20px;height:20px}

/* ---- salto de la burbuja del carrito al entrar algo ---- */
@keyframes na-bump{
  0%{transform:scale(1)}
  38%{transform:scale(1.16)}
  68%{transform:scale(.96)}
  100%{transform:scale(1)}
}
.na-fab.is-bump{animation:na-bump 420ms var(--ease-out)}

/* Movimiento reducido: nada se desplaza ni rebota, pero lo que confirma
   una acción sigue viéndose —el aviso aparece con un fundido, la palomita
   ya dibujada, la línea nueva se ilumina (es color, no movimiento)—. El
   vuelo y el salto de la burbuja ni se crean: los decide carrito.js. */
@media (prefers-reduced-motion:reduce){
  .na-fab,.na-veil,.na-box,.na-toast{transition-duration:1ms}
  .na-fab.is-bump{animation:none}
  .na-add{transform:none;transition:opacity 160ms ease}
  .cta-cart.is-ok{animation:none}
  .cta-cart.is-ok svg path{animation:none;stroke-dashoffset:0}
  .na-giro{animation-duration:1.6s}
}