/* ============================================================
   Nutrición Activa — ficha de producto
   Capa propia de las páginas producto-*.html. No redefine ningún
   token de marca: 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 ya 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.
   ============================================================ */

/* ---- rejilla de dos columnas ----
   La galería mide poco más de su lado cuadrado; la columna de compra
   arrastra selectores, sellos y acordeón, así que siempre es la más
   alta. Por eso la que se queda fija al hacer scroll es la galería:
   pegar la columna corta es lo que mantiene la foto a la vista
   mientras se lee el resto. */
.pdp{max-width:1120px;margin:0 auto;padding:clamp(20px,3vw,34px) 24px clamp(56px,7vw,88px);
  display:grid;grid-template-columns:minmax(0,48fr) minmax(0,52fr);
  gap:clamp(28px,3.6vw,52px);align-items:start}

/* ============================================================
   COLUMNA IZQUIERDA — galería
   ============================================================ */
.pdp-media{position:sticky;top:calc(var(--header-h) + 16px)}

/* touch-action: el dedo en vertical sigue siendo scroll de la página (y el
   pellizco sigue haciendo zoom); el gesto horizontal lo recibe producto.js
   para pasar de foto. Sin esto el navegador se queda el deslizamiento
   lateral y el script nunca se entera. */
.gal-main{position:relative;background:var(--ink);border-radius:20px;overflow:hidden;
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  touch-action:pan-y pinch-zoom}
/* El cambio de foto lo anima producto.js (Web Animations): sale atenuada
   hacia un lado y entra desde el otro cuando la nueva ya está descargada. */
.gal-main img{width:100%;height:100%;object-fit:contain}

/* píldora de categoría sobre la foto, como en la referencia.
   En móvil se repite arriba del H1, donde sí se lee. */
.gal-badge{position:absolute;top:16px;left:16px;z-index:2;
  display:inline-flex;align-items:center;gap:8px;
  background:var(--jade-bg);border-radius:999px;padding:9px 16px 9px 13px}
.gal-badge i{width:7px;height:7px;border-radius:50%;background:var(--jade);flex:none}
.gal-badge span{font-family:Figtree,system-ui,sans-serif;font-size:11.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--jade-dark);white-space:nowrap}

/* flechas: producto.js las esconde cuando la ficha trae una sola imagen.
   Un control que no lleva a ningún lado enseña que el sitio está a medias. */
.gal-nav{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:space-between;padding:0 12px;pointer-events:none}
.gal-nav button{pointer-events:auto;width:42px;height:42px;border-radius:50%;border:0;
  background:var(--paper);color:var(--ink);cursor:pointer;display:flex;
  align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;
  box-shadow:0 6px 18px rgba(20,22,26,.22);
  transition:background var(--t-state) ease,color var(--t-state) ease,
             transform var(--t-press) var(--ease-out)}
.gal-nav button svg{width:19px;height:19px;display:block}
@media (hover:hover) and (pointer:fine){
  .gal-nav button:hover{background:var(--jade);color:var(--tile-text)}
}
.gal-nav button:active{transform:scale(.92)}
.gal-nav button:focus-visible{outline:3px solid var(--jade-light);outline-offset:3px}

/* contador de la galería: lo inyecta producto.js y solo cuando hay más de una
   imagen. Dice cuántas fotos quedan sin tener que contar las miniaturas. */
.gal-count{position:absolute;right:14px;bottom:14px;z-index:2;
  padding:6px 11px;border-radius:999px;background:rgba(20,22,26,.62);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-family:Figtree,system-ui,sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.06em;color:var(--tile-text);line-height:1;
  font-variant-numeric:tabular-nums}

/* miniaturas: la activa se marca con anillo Y con opacidad. Solo el borde se
   pierde cuando el producto de la foto ya es oscuro y la miniatura es chica. */
.gal-thumbs{display:flex;gap:10px;margin-top:12px;padding:2px;
  overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;overscroll-behavior-x:contain}
.gal-thumbs button{flex:none;width:84px;height:84px;padding:0;cursor:pointer;
  background:var(--ink);border:0;border-radius:13px;overflow:hidden;opacity:.55;
  scroll-snap-align:start;-webkit-tap-highlight-color:transparent;
  box-shadow:0 0 0 1.5px var(--line);
  transition:opacity var(--t-state) ease,box-shadow var(--t-state) ease,
             transform var(--t-press) var(--ease-out)}
.gal-thumbs button img{width:100%;height:100%;object-fit:contain;display:block}
@media (hover:hover) and (pointer:fine){
  .gal-thumbs button:hover{opacity:.85;box-shadow:0 0 0 1.5px var(--jade-light)}
}
.gal-thumbs button:active{transform:scale(.95)}
.gal-thumbs button[aria-current="true"]{opacity:1;box-shadow:0 0 0 2.5px var(--jade)}
.gal-thumbs button:focus-visible{outline:3px solid var(--jade-light);outline-offset:2px}

/* ============================================================
   COLUMNA DERECHA — bloque de compra
   ============================================================ */
.pdp-buy{min-width:0}

/* migas: mismo trazo que en las páginas de categoría */
.pdp-buy .crumbs{margin:0 0 16px}
.pdp-buy .crumbs ol{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;
  align-items:center;gap:8px;font-family:Figtree,system-ui,sans-serif;
  font-size:13.5px;line-height:1.4;color:var(--muted)}
.pdp-buy .crumbs li{display:flex;align-items:center;gap:8px}
.pdp-buy .crumbs li+li::before{content:'\203A';color:var(--line);font-size:16px;line-height:1}
.pdp-buy .crumbs a{color:var(--jade-dark);text-decoration:underline;
  text-decoration-color:transparent;transition:text-decoration-color var(--t-state) ease}
.pdp-buy .crumbs a:hover{text-decoration-color:var(--jade)}
.pdp-buy .crumbs [aria-current]{color:var(--ink);font-weight:700}

/* la píldora de categoría duplicada para móvil; en escritorio manda la de la foto */
.pdp-badge{display:none;align-items:center;gap:8px;background:var(--jade-bg);
  border-radius:999px;padding:8px 15px 8px 12px;margin:0 0 14px}
.pdp-badge i{width:7px;height:7px;border-radius:50%;background:var(--jade);flex:none}
.pdp-badge span{font-family:Figtree,system-ui,sans-serif;font-size:11.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--jade-dark)}

.pdp-title{margin:0;font-family:'Archivo Black',Archivo,sans-serif;
  font-size:clamp(29px,3.9vw,46px);line-height:1.05;letter-spacing:-.022em;
  color:var(--ink);text-wrap:balance}
.pdp-lead{margin:14px 0 0;font-family:Figtree,system-ui,sans-serif;font-weight:400;
  font-size:16px;line-height:1.58;color:var(--muted);text-wrap:pretty;max-width:56ch}
.pdp-lead b{color:var(--ink);font-weight:700}

/* Título y prueba social en una sola fila (Antara). La píldora a la derecha
   del nombre se lee como parte del título —"Antara, +60 cajas vendidas"—
   y no como un renglón más que empuja el precio hacia abajo. Si no cabe,
   baja sola a la fila de abajo. */
.pdp-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.pdp-head .pdp-proof{margin:0}

/* ---- rejilla de datos duros ----
   Se rellena desde la presentación seleccionada, así que un dato que
   solo es cierto de una caja no se queda pegado al elegir otra.
   Si una presentación trae dos datos, se pintan dos. */
.pdp-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:24px 0 0;
  padding:0;list-style:none}
.pdp-facts:empty{display:none}
.pdp-facts li{display:flex;align-items:flex-start;gap:11px;
  border:1px solid var(--line);border-radius:13px;padding:13px 14px;background:var(--paper-alt)}
.pdp-facts .ic{flex:none;width:30px;height:30px;border-radius:50%;background:var(--jade-bg);
  display:flex;align-items:center;justify-content:center;color:var(--jade-dark)}
.pdp-facts .ic svg{width:16px;height:16px;display:block}
.pdp-facts .tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.pdp-facts .k{font-family:Figtree,system-ui,sans-serif;font-size:11px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.pdp-facts .v{font-size:14.5px;font-weight:700;line-height:1.3;color:var(--ink)}

/* ---- títulos de cada selector ---- */
.pdp-lbl{display:block;margin:26px 0 11px;font-family:Figtree,system-ui,sans-serif;
  font-size:11.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.pdp-lbl b{color:var(--ink);font-weight:800;letter-spacing:.02em;text-transform:none;font-size:13.5px}

/* ---- pista corta bajo un selector ----
   Una línea de texto que explica el selector que tiene encima. No es el
   microcopy del botón: va alineada a la izquierda y pegada a su grupo. */
.pdp-hint{margin:10px 0 0;font-family:Figtree,system-ui,sans-serif;font-size:13px;
  line-height:1.5;color:var(--muted);text-align:left}

/* ---- chips de sabor ----
   Cada chip lleva su propio punto de radio a la izquierda. Está SIEMPRE
   dibujado, encendido o apagado, así que marcar un sabor no mueve ni un píxel
   del texto: solo cambia el color. Un indicador que aparece al seleccionarse
   empuja la fila entera y la selección se siente como un tropiezo. */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips .chip{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:46px;
  padding:0 16px 0 14px;border:1.5px solid var(--line);border-radius:999px;background:var(--paper);
  font-size:14.5px;font-weight:700;color:var(--ink);cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:border-color var(--t-state) ease,background-color var(--t-state) ease,
             color var(--t-state) ease,box-shadow var(--t-state) ease,
             transform var(--t-press) var(--ease-out)}
.chips .chip input{position:absolute;opacity:0;width:100%;height:100%;left:0;top:0;margin:0;cursor:pointer}
.chips .chip::before{content:'';flex:none;width:15px;height:15px;border-radius:50%;
  border:2px solid var(--line);background:var(--paper);box-sizing:border-box;
  transition:border-color var(--t-state) ease,box-shadow var(--t-state) ease,
             background-color var(--t-state) ease}
@media (hover:hover) and (pointer:fine){
  .chips .chip:hover{border-color:var(--jade-light);background:var(--paper-alt)}
  .chips .chip:hover::before{border-color:var(--jade-light)}
  .chips .chip.is-on:hover{background:var(--jade-bg)}
}
.chips .chip.is-on{border-color:var(--jade);background:var(--jade-bg);color:var(--jade-dark);
  box-shadow:0 0 0 1px var(--jade)}
.chips .chip.is-on::before{border-color:var(--jade);background:var(--jade);
  box-shadow:inset 0 0 0 2.5px var(--jade-bg)}
.chips .chip:active{transform:scale(.97)}
/* Anillo de foco solo con teclado. Con :focus-within salía también al
   tocar —el radio se queda enfocado tras el toque— y la opción recién
   elegida se veía con doble borde, como si fuera otro estado. */
.chips .chip:has(input:focus-visible){outline:3px solid var(--jade-light);outline-offset:2px}
@supports not selector(:has(*)){.chips .chip:focus-within{outline:3px solid var(--jade-light);outline-offset:2px}}
/* distintivo del sabor que más se pide. Va dentro del chip, no al lado:
   la fila envuelve, y una pastilla suelta acabaría en otro renglón que
   su sabor. Sube al nombre accesible del radio, que es lo que se quiere.
   Tinta y no naranja (2026-09-27): craft.css reserva el naranja para "esto
   cobra", y esta pastilla era el único naranja de la ficha que no cobraba. */
.chips .chip .tag{margin-left:2px;padding:4px 8px;border-radius:999px;
  background:var(--ink);color:var(--tile-text);font-family:Figtree,system-ui,sans-serif;
  font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  line-height:1;white-space:nowrap}
/* chip con foto: el segundo producto del kit. La foto va entre el punto del
   radio y el nombre, del alto de una línea de texto y medio. */
.chips .chip-foto{padding-left:12px}
.chips .chip-foto img{flex:none;width:30px;height:30px;border-radius:8px;
  object-fit:cover;background:var(--ink)}

/* ---- tarjetas de presentación ----
   Cada presentación es una tarjeta de oferta: foto, nombre, lo que rinde,
   precio y —cuando el dato es real— la etiqueta de envío gratis. La etiqueta
   NO la escribe el HTML: la calcula producto.js comparando el precio de la
   caja contra el mínimo de envío gratis publicado. Si el mínimo cambia, la
   etiqueta cambia sola y nunca promete algo que no se cumple. */
.opts{display:flex;flex-direction:column;gap:11px}
.opt{position:relative;display:grid;grid-template-columns:22px 58px minmax(0,1fr) auto;
  align-items:center;gap:14px;min-height:76px;padding:13px 16px 13px 14px;
  border:1.5px solid var(--line);border-radius:16px;background:var(--paper);cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:border-color var(--t-state) ease,background-color var(--t-state) ease,
             box-shadow var(--t-state) ease,transform var(--t-press) var(--ease-out)}
.opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}

/* el punto de radio con su palomita. La palomita se dibuja con dos bordes
   girados: entra escalando desde el centro, que es el gesto que hace que
   marcar una opción se sienta resuelto y no solo registrado. */
.opt .dot{position:relative;width:21px;height:21px;border-radius:50%;
  border:2px solid var(--line);background:var(--paper);box-sizing:border-box;
  transition:border-color var(--t-state) ease,background-color var(--t-state) ease}
.opt .dot::after{content:'';position:absolute;left:6px;top:3px;width:5px;height:9px;
  border:solid var(--paper);border-width:0 2.2px 2.2px 0;
  transform:rotate(45deg) scale(0);transform-origin:center;
  transition:transform var(--t-state) var(--ease-out)}

.opt .th{width:58px;height:58px;border-radius:12px;background:var(--ink);overflow:hidden;
  transition:transform var(--t-state) var(--ease-out)}
.opt .th img{width:100%;height:100%;object-fit:contain;display:block}
.opt .th.is-empty{background:var(--paper-alt);border:1px dashed var(--line)}
.opt .nm{display:flex;flex-direction:column;gap:3px;min-width:0}
.opt .nm .n{font-size:16px;font-weight:800;line-height:1.25;color:var(--ink)}
.opt .nm .s{font-family:Figtree,system-ui,sans-serif;font-size:13px;line-height:1.4;color:var(--muted)}
.opt .nm .s:empty{display:none}
/* columna del precio: el precio y, debajo, la etiqueta que producto.js cuelga
   cuando la caja por sí sola alcanza el envío gratis. Van juntas a propósito
   —el dato de valor se lee donde se lee el precio, no en otra esquina. */
.opt .pz{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
.opt .pr{font-family:'Archivo Black',Archivo,sans-serif;font-size:23px;letter-spacing:-.015em;
  line-height:1;color:var(--ink);white-space:nowrap}
/* precio de referencia tachado dentro de la tarjeta de presentacion. Misma
   jerarquia que en la caja de compra: el de referencia ARRIBA, pequeno y gris;
   el que se cobra debajo, con la Archivo Black. El margen negativo cancela el
   gap de 6px de la columna, que aqui separaria dos numeros que se leen juntos.
   Solo aparece si el HTML de la tarjeta lo escribe, igual que el precio. */
.opt .pw{font-family:Figtree,system-ui,sans-serif;font-size:12.5px;font-weight:600;
  color:var(--muted);line-height:1.15;margin-bottom:-3px;white-space:nowrap;
  text-decoration:line-through;text-decoration-thickness:1.5px;
  text-decoration-color:color-mix(in srgb,var(--muted) 60%,transparent)}
.opt .flag{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;
  background:var(--jade);color:var(--tile-text);font-family:Figtree,system-ui,sans-serif;
  font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  line-height:1;white-space:nowrap}
.opt .flag svg{width:11px;height:11px;flex:none}

@media (hover:hover) and (pointer:fine){
  .opt:hover{border-color:var(--jade-light);background:var(--paper-alt)}
  .opt:hover .th{transform:scale(1.04)}
  .opt.is-on:hover{background:var(--jade-bg)}
}
.opt:active{transform:scale(.995)}
/* la caja que ya alcanza el envío gratis se distingue sin estar elegida:
   borde teñido, no relleno. Elegirla sigue siendo un clic, igual que la otra. */
.opt.is-best{border-color:var(--jade-light)}
.opt.is-on{border-color:var(--jade);background:var(--jade-bg);
  box-shadow:0 0 0 1.5px var(--jade),0 14px 30px -24px var(--shadow)}
.opt.is-on .dot{border-color:var(--jade);background:var(--jade)}
.opt.is-on .dot::after{transform:rotate(45deg) scale(1)}
.opt.is-on .pr{color:var(--jade-dark)}
.opt:has(input:focus-visible){outline:3px solid var(--jade-light);outline-offset:2px}
@supports not selector(:has(*)){.opt:focus-within{outline:3px solid var(--jade-light);outline-offset:2px}}

/* ---- cinta de la presentación que más conviene ----
   La pinta producto.js y SOLO en una tarjeta, y solo cuando el hecho que
   afirma se puede comprobar (ver pintarEtiquetasPresentacion). Se sienta a
   caballo del borde superior para que se lea antes que la tarjeta, que es
   justo lo que tiene que hacer: dirigir la primera mirada a la opción que
   además deja de cobrar el envío.

   Verde jade, no naranja. El naranja de este sitio significa "esto cobra" y
   está reservado al botón de pagar; si una etiqueta decorativa lo usara, el
   ojo dejaría de saber dónde está el botón. */
.opt .ribbon{position:absolute;top:0;left:14px;transform:translateY(-50%);
  display:inline-flex;align-items:center;padding:4px 11px;border-radius:999px;
  background:var(--jade);color:var(--tile-text);
  font-family:Figtree,system-ui,sans-serif;font-size:9.5px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;line-height:1.35;white-space:nowrap;
  box-shadow:0 4px 12px -6px rgba(14,107,92,.9)}
/* el hueco lo abre la tarjeta, no un margen suelto: así la cinta nunca pisa
   la tarjeta de arriba por mucho que cambie el espaciado de la lista */
.opts:has(.has-ribbon){padding-top:9px}
@supports not selector(:has(*)){.opts{padding-top:9px}}

/* ============================================================
   CAJA DE COMPRA
   Un solo recuadro con todo lo que decide la compra: el precio de
   lo que hay elegido, la cantidad, el botón, las formas de pago,
   el envío y la confianza. Va sobre papel alterno y las piezas de
   dentro sobre papel: dos tonos bastan para que se lea como un
   módulo y no como más página.
   ============================================================ */
.buybox{margin:24px 0 0;padding:18px;border:1.5px solid var(--line);border-radius:20px;
  background:var(--paper-alt);box-shadow:0 22px 48px -38px var(--shadow)}

.bb-top{display:flex;flex-direction:column;gap:6px;padding:0 2px 16px;
  border-bottom:1px solid var(--line)}
.bb-sel{font-family:Figtree,system-ui,sans-serif;font-size:11.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);line-height:1.35}
.bb-sel:empty{display:none}
.bb-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.bb-now{font-family:'Archivo Black',Archivo,sans-serif;font-size:clamp(31px,4.6vw,39px);
  line-height:1;letter-spacing:-.025em;color:var(--ink)}
.bb-cur{font-family:Figtree,system-ui,sans-serif;font-size:12.5px;font-weight:800;
  letter-spacing:.08em;color:var(--muted)}
.bb-calc{font-family:Figtree,system-ui,sans-serif;font-size:13px;line-height:1.45;color:var(--muted)}
.bb-calc b{color:var(--ink);font-weight:700}

/* ---- precio de referencia tachado ----
   Solo aparece cuando la presentación declara un data-precio-regular MAYOR
   que el que se cobra; lo decide precioDe() en assets/producto.js. Las ocho
   fichas que no lo declaran no dibujan nada de esto.

   JERARQUÍA: el de referencia va ARRIBA, pequeño y gris; el que se cobra va
   debajo, con la Archivo Black de 39 px que ya usaba la caja. El tachado no
   puede competir con el número que importa, y por eso no comparte renglón
   con él: en la misma línea el ojo los lee como dos precios a la par y hay
   que decidir cuál es cuál. */
.bb-was{font-family:Figtree,system-ui,sans-serif;font-size:14.5px;font-weight:600;
  color:var(--muted);line-height:1.2;text-decoration:line-through;
  text-decoration-thickness:1.5px;text-decoration-color:color-mix(in srgb,var(--muted) 60%,transparent);
  letter-spacing:.01em}
.bb-was[hidden]{display:none}

/* La resta de los dos números de arriba, y nada más. Verde jade porque en
   este sitio el verde significa "esto ya está resuelto" (envío gratis,
   agregado). El naranja está reservado para lo que cobra. */
.bb-save{display:inline-flex;align-items:center;
  padding:4px 9px;border-radius:999px;background:var(--jade-bg);
  font-family:Figtree,system-ui,sans-serif;font-size:11.5px;font-weight:800;
  letter-spacing:.02em;color:var(--jade-dark);line-height:1;white-space:nowrap;
  align-self:center}
.bb-save[hidden]{display:none}

/* ============================================================
   PRUEBA SOCIAL — "+60 cajas vendidas"

   Dato real facilitado por la dueña. Se dice EXACTAMENTE así: cajas
   vendidas. No son clientes, ni personas, ni "este mes", ni "hoy" —
   ninguna de esas versiones es lo que el dato afirma, y todas suenan
   a urgencia fabricada.

   Aparece una sola vez, junto al título. Hasta el 2026-09-28 salía
   también dentro de la caja de compra (.bb-proof); se quitó porque a
   700 px de la primera no decía nada nuevo. Repetido, deja de leerse
   como un hecho y empieza a leerse como publicidad.
   ============================================================ */
.pdp-proof{display:inline-flex;align-items:center;gap:7px;
  margin:10px 0 0;padding:6px 12px 6px 10px;
  border:1px solid color-mix(in srgb,var(--jade) 24%,transparent);
  border-radius:999px;background:var(--jade-bg);
  font-family:Figtree,system-ui,sans-serif;font-size:12.5px;font-weight:700;
  letter-spacing:.01em;color:var(--jade-dark);line-height:1.2}
.pdp-proof svg{width:15px;height:15px;flex:none;stroke:var(--jade)}
.pdp-proof b{font-weight:800}

/* La barra fija móvil también lleva su tachado, en pequeño y antes del
   precio: es el único precio a la vista cuando la caja ya salió por arriba.
   Si no cabe entero, no sale: un "$2,4" cortado es peor que nada (pasaba
   entre 341 y 365 px). El \200B de delante es un punto de corte; cuando el
   número no cabe en el renglón baja al segundo, que el alto de un renglón
   y el overflow esconden. */
.pdp-bar .bp .w{font-family:Figtree,system-ui,sans-serif;font-size:11.5px;
  font-weight:600;color:var(--muted);line-height:1.2;height:1.2em;
  white-space:normal;overflow:hidden;
  text-decoration:line-through;text-decoration-thickness:1.3px}
.pdp-bar .bp .w::before{content:'\200B'}
.pdp-bar .bp .w[hidden]{display:none}

/* ---- selector de cantidad ----
   Las tarjetas las construye producto.js con los totales ya calculados:
   precio × cantidad, sin un solo descuento inventado. Cuando una cantidad
   alcanza el mínimo de envío gratis publicado, se dice, porque eso sí es un
   ahorro real y comprobable contra la Política de Envíos. */
.bb-qty{margin:0}
.bb-qty[hidden]{display:none}
.bb-qty .pdp-lbl{margin:16px 0 10px}
/* Columnas contadas, no auto-fit. Con auto-fit el suelo real de cada pista no
   es el minmax sino el min-content de la tarjeta —"$2,800" no parte—, así que
   con cuatro cantidades cabían tres y la cuarta se quedaba huérfana en una
   segunda fila. producto.js escribe cuántas hay en data-n y aquí se reparten. */
.qtys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.qtys[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
/* El hueco para la cinta de "Envío gratis" lo abre la FILA, no la tarjeta que
   la lleva: con el margen en la tarjeta, esa quedaba 8 px más abajo que sus
   vecinas y los números dejaban de alinearse. */
.qtys.has-fl{margin-top:12px;row-gap:20px}
.qty{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;min-width:0;min-height:74px;padding:11px 7px;border:1.5px solid var(--line);border-radius:14px;
  background:var(--paper);cursor:pointer;text-align:center;-webkit-tap-highlight-color:transparent;
  transition:border-color var(--t-state) ease,background-color var(--t-state) ease,
             box-shadow var(--t-state) ease,transform var(--t-press) var(--ease-out)}
.qty input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.qty .q{font-family:'Archivo Black',Archivo,sans-serif;font-size:19px;line-height:1;
  letter-spacing:-.02em;color:var(--ink)}
.qty .l{font-family:Figtree,system-ui,sans-serif;font-size:10px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);line-height:1.2}
.qty .t{font-family:Figtree,system-ui,sans-serif;font-size:12.5px;font-weight:700;
  line-height:1.2;color:var(--ink);white-space:nowrap}
.qty .fl{position:absolute;top:-8px;left:50%;transform:translateX(-50%);
  padding:3px 7px;border-radius:999px;background:var(--jade);color:var(--tile-text);
  font-family:Figtree,system-ui,sans-serif;font-size:8.5px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;line-height:1;white-space:nowrap}
@media (hover:hover) and (pointer:fine){
  .qty:hover{border-color:var(--jade-light);background:var(--paper-alt)}
  .qty.is-on:hover{background:var(--jade-bg)}
}
.qty:active{transform:scale(.97)}
.qty.is-on{border-color:var(--jade);background:var(--jade-bg);
  box-shadow:0 0 0 1.5px var(--jade)}
.qty.is-on .q,.qty.is-on .t{color:var(--jade-dark)}
.qty.is-on .l{color:var(--jade-dark);opacity:.75}
.qty:has(input:focus-visible){outline:3px solid var(--jade-light);outline-offset:2px}
@supports not selector(:has(*)){.qty:focus-within{outline:3px solid var(--jade-light);outline-offset:2px}}

/* ---- barra de envío gratis dentro de la caja ----
   El dibujo lo pone .na-prog de assets/carrito.css, que es el mismo que usa
   el panel del carrito; aquí solo se le da su sitio. Un único componente
   para los dos lugares evita que dentro de un mes el porcentaje se calcule
   distinto en la ficha que en el carrito. */
.bb-prog{margin:18px 0 0}
.bb-prog:empty{display:none}
.bb-prog .na-prog{margin:0}

/* ---- llamadas a la acción ---- */
.pdp-cta{margin:18px 0 0}
.cta-buy{width:100%;min-height:58px;display:flex;align-items:center;justify-content:center;
  gap:9px;border:0;border-radius:16px;background:var(--color-cta);color:#FFFFFF;cursor:pointer;
  font-family:Archivo,system-ui,sans-serif;font-size:17px;font-weight:800;letter-spacing:.015em;
  -webkit-tap-highlight-color:transparent;
  box-shadow:0 12px 26px -14px rgba(232,93,42,.75);
  transition:background-color var(--t-state) ease,box-shadow var(--t-state) ease,
             transform var(--t-press) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .cta-buy:hover:not(:disabled){background:var(--color-cta-hover);
    box-shadow:0 16px 30px -13px rgba(232,93,42,.85);transform:translateY(-1px)}
}
.cta-buy:active:not(:disabled){transform:translateY(1px) scale(.994);
  box-shadow:0 6px 14px -10px rgba(232,93,42,.8)}
.cta-buy:focus-visible{outline:3px solid var(--jade-light);outline-offset:3px}
/* Sin JS no hay carrito y el botón no cobra: nace deshabilitado en el HTML y
   lo enciende carrito.js. Un botón que dice "Comprar ahora" y no cobra promete
   un pago que no existe. */
.cta-buy:disabled{background:var(--paper-alt);color:var(--muted);cursor:not-allowed;
  border:1.5px solid var(--line);box-shadow:none}
.cta-note{margin:11px 0 0;font-family:Figtree,system-ui,sans-serif;font-size:12.5px;
  line-height:1.5;color:var(--muted);text-align:center;text-wrap:pretty}
/* el candado es el mismo trazo que el de "Pago seguro" de la fila de
   confianza; va pegado al texto para que la frase se lea como un sello */
.cta-note svg{display:inline-block;width:14px;height:14px;margin:0 5px 0 0;
  vertical-align:-2px;color:var(--jade)}

/* ---- formas de pago ----
   Solo las que la cuenta de Stripe tiene encendidas de verdad. Fila discreta:
   confirma, no vende. */
.pdp-pay{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;
  margin:14px 0 0;padding:0;list-style:none}
.pdp-pay li{display:flex;align-items:center}
/* el display:flex de arriba le gana al atributo [hidden] por especificidad, y
   sin esto el sello de Apple Pay se vería también donde no se puede pagar así */
.pdp-pay li[hidden]{display:none}
.pdp-pay svg{width:44px;height:27.5px;display:block;border-radius:6px}
.pdp-pay .tx{font-family:Figtree,system-ui,sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.02em;color:var(--muted);padding-left:4px}

/* ---- línea de envío ----
   Dentro de la caja y con su propio recuadro: es el otro número que el cliente
   va a pagar, y no puede aparecer por primera vez en la pantalla de Stripe. */
.pdp-ship{display:flex;align-items:flex-start;gap:10px;margin:14px 0 0;
  padding:12px 14px;border:1px solid var(--line);border-radius:13px;background:var(--paper);
  font-family:Figtree,system-ui,sans-serif;font-size:13.5px;line-height:1.5;color:var(--muted);
  transition:border-color var(--t-state) ease,background-color var(--t-state) ease}
.pdp-ship svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--jade)}
.pdp-ship b{color:var(--jade-dark);font-weight:800}
.pdp-ship.is-free{border-color:var(--jade-light);background:var(--jade-bg);color:var(--jade-dark)}

/* ---- fila de confianza ----
   Cuatro datos, todos publicados en otro sitio del sitio: Términos §5 (Stripe),
   la salida del mismo día confirmada por la dueña, y la Política de Envíos §06
   y §07 (guía y reposición). Nada que no se pueda ir a leer. */
.pdp-trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 14px;
  margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line);list-style:none}
.pdp-trust li{display:flex;align-items:flex-start;gap:10px;min-width:0}
.pdp-trust .ic{flex:none;width:28px;height:28px;border-radius:50%;background:var(--jade-bg);
  display:flex;align-items:center;justify-content:center;color:var(--jade-dark)}
.pdp-trust .ic svg{width:15px;height:15px;display:block}
.pdp-trust .tx{font-family:Figtree,system-ui,sans-serif;font-size:12.5px;line-height:1.45;
  color:var(--muted);min-width:0;text-wrap:pretty}
/* el corte de salida cuando todavía se alcanza: el único dato de la columna
   que cambia con la hora, y el único que se tiñe. Fuera de ese rato vuelve al
   gris del resto — si estuviera siempre verde dejaría de significar nada. */
.pdp-trust li[data-corte].is-live .ic{background:var(--jade);color:var(--tile-text)}
.pdp-trust li[data-corte].is-live .tx b{color:var(--jade-dark)}
.pdp-trust .tx b{display:block;font-size:13px;font-weight:800;color:var(--ink);
  letter-spacing:-.005em;margin-bottom:1px}

/* ---- salida de auxilio: WhatsApp ----
   Tercer nivel. Existe porque es un canal real de la tienda, pero no compite
   con el botón que cobra: sin relleno, sin color de marca y con media línea
   que dice para qué sirve. */
/* ---- prueba social dentro de la caja de compra ----
   Tres capturas en fila, altas y estrechas como la captura de un teléfono.
   No llevan marco de tarjeta: son fotos de conversaciones, y enmarcarlas las
   haría parecer testimonios maquetados por nosotros, que es exactamente la
   lectura que hay que evitar. */
.pdp-social{margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line)}
.pdp-social .h{margin:0 0 11px;font-family:Figtree,system-ui,sans-serif;font-size:11px;
  font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pdp-social .row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.pdp-social .sh{padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--paper-alt);cursor:zoom-in;aspect-ratio:9/13;
  -webkit-tap-highlight-color:transparent;
  transition:border-color var(--t-state) ease,transform var(--t-press) var(--ease-out),
             box-shadow var(--t-state) ease}
.pdp-social .sh img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
@media (hover:hover) and (pointer:fine){
  .pdp-social .sh:hover{border-color:var(--jade-light);transform:translateY(-2px);
    box-shadow:0 10px 22px -16px var(--shadow)}
}
.pdp-social .sh:active{transform:scale(.98)}
.pdp-social .sh:focus-visible{outline:3px solid var(--jade-light);outline-offset:2px}
.pdp-social .n{margin:10px 0 0;font-family:Figtree,system-ui,sans-serif;font-size:11.5px;
  line-height:1.5;color:var(--muted);text-wrap:pretty}

/* ---- quién atiende ----
   Sustituye a la línea "¿Dudas antes de comprar?". El botón de WhatsApp que
   viene justo debajo es el mismo de antes; lo que cambia es que ahora tiene
   una cara y un nombre encima. */
.pdp-ayuda{display:flex;align-items:center;gap:13px;margin:18px 0 10px;
  padding:13px 15px;border:1.5px solid var(--line);border-radius:15px;
  background:var(--paper-alt)}
.pdp-ayuda .av{flex:none;width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;object-fit:cover;
  background:var(--jade);color:var(--tile-text);
  font-family:'Archivo Black',Archivo,sans-serif;font-size:20px;line-height:1}
.pdp-ayuda .tx{min-width:0}
.pdp-ayuda .tx b{display:block;font-size:14.5px;font-weight:800;color:var(--ink);
  line-height:1.3}
.pdp-ayuda .tx p{margin:3px 0 0;font-family:Figtree,system-ui,sans-serif;font-size:12.5px;
  line-height:1.45;color:var(--muted);text-wrap:pretty}

.bb-ayuda{margin:16px 0 8px;font-family:Figtree,system-ui,sans-serif;font-size:12px;
  font-weight:700;letter-spacing:.04em;color:var(--muted);text-align:center}
.cta-wa{width:100%;min-height:46px;display:flex;align-items:center;
  justify-content:center;gap:9px;border:1.5px solid var(--line);border-radius:13px;
  background:transparent;color:var(--ink);font-size:14.5px;font-weight:800;letter-spacing:.02em;
  -webkit-tap-highlight-color:transparent;
  transition:border-color var(--t-state) ease,background-color var(--t-state) ease,
             color var(--t-state) ease,transform var(--t-press) var(--ease-out)}
.cta-wa svg{width:17px;height:17px;flex:none}
@media (hover:hover) and (pointer:fine){
  .cta-wa:hover{border-color:var(--jade-light);background:var(--jade-bg);color:var(--jade-dark)}
}
.cta-wa:active{transform:scale(.99)}
.cta-wa:focus-visible{outline:3px solid var(--jade-light);outline-offset:3px}

/* ---- sellos de advertencia ----
   Visibles y en su sitio, no metidos en el acordeón. Se pintan solo
   cuando el sello está confirmado en el proyecto: la ausencia de un
   sello no se declara nunca como "no tiene sellos". */
.pdp-sellos{margin:18px 0 0;border:1.5px solid var(--flame);border-radius:14px;
  background:var(--paper-alt);padding:14px 16px}
.pdp-sellos:empty{display:none}
.pdp-sellos .h{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--color-cta-ink)}
.pdp-sellos .h svg{width:17px;height:17px;flex:none}
.pdp-sellos ul{margin:9px 0 0;padding:0 0 0 2px;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.pdp-sellos li{border:1.5px solid var(--ink);border-radius:8px;padding:7px 12px;
  font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--ink);background:var(--paper)}
.pdp-sellos p{margin:10px 0 0;font-family:Figtree,system-ui,sans-serif;font-size:13px;
  line-height:1.55;color:var(--muted)}

/* ---- aviso de página (cafeína, infantil…) ---- */
/* Recuadro completo, como la línea de envío y el bloque de sellos: en esta
   columna todos los avisos se encierran igual. Antes llevaba solo un filete
   jade a la izquierda y era la única pieza del archivo con ese corte. */
.pdp-aviso{margin:16px 0 0;border:1.5px solid var(--jade-light);background:var(--jade-bg);
  border-radius:14px;padding:13px 15px;
  font-family:Figtree,system-ui,sans-serif;font-size:14px;line-height:1.55;color:var(--jade-dark)}
.pdp-aviso strong{font-weight:800}

/* ---- acordeón: <details> nativo, cerrado por defecto ---- */
.acc{margin:26px 0 0;border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:14px;min-height:56px;padding:8px 2px;
  font-size:15.5px;font-weight:800;color:var(--ink)}
.acc summary::-webkit-details-marker{display:none}
.acc summary svg{width:19px;height:19px;flex:none;color:var(--muted);
  transition:transform var(--t-state) var(--ease-out)}
.acc details[open] summary svg{transform:rotate(180deg)}
.acc summary:focus-visible{outline:3px solid var(--jade-light);outline-offset:-3px;border-radius:6px}
.acc .panel{padding:0 2px 18px}
.acc .panel p{margin:0 0 10px;font-family:Figtree,system-ui,sans-serif;font-size:14.5px;
  line-height:1.62;color:var(--muted)}
.acc .panel p:last-child{margin-bottom:0}
.acc .panel ul{margin:0 0 10px;padding-left:20px;font-family:Figtree,system-ui,sans-serif;
  font-size:14.5px;line-height:1.62;color:var(--muted)}
.acc .panel li{margin-bottom:5px}
.acc .panel a{color:var(--jade-dark);font-weight:700;text-decoration:underline;
  text-decoration-color:var(--jade-light)}
.acc .panel b{color:var(--ink)}

/* ---- disclaimer legal al pie de la ficha ---- */
.pdp-legal{margin:22px 0 0;font-family:Figtree,system-ui,sans-serif;font-size:12.5px;
  line-height:1.62;color:var(--muted)}
.pdp-legal p{margin:0 0 7px}
.pdp-legal p:last-child{margin-bottom:0}

/* ============================================================
   DESCRIPCIÓN A LO ANCHO — "Qué es Antara y qué trae adentro"
   Va entre la rejilla de dos columnas y las píldoras del catálogo,
   a todo el ancho del contenedor. Ocupa la banda que quedaba vacía
   cuando la columna de compra termina: la galería es sticky y ahí ya
   no sostiene nada.

   Por qué aquí y no arriba: la ficha de datos de la columna derecha
   tiene que caber antes del precio, así que lleva cifras y nada más.
   El detalle —de dónde sale cada gramo, cómo se prepara, qué rinde
   cada bolsa— necesita renglones, y aquí abajo sí los hay.
   ============================================================ */
.pdp-desc{max-width:1120px;margin:0 auto;padding:0 24px clamp(40px,5vw,66px)}
.pdp-desc h2{margin:0;font-family:'Archivo Black',Archivo,sans-serif;font-weight:400;
  font-size:clamp(23px,2.5vw,31px);line-height:1.14;letter-spacing:-.02em;color:var(--ink)}
.pdp-desc .lead{margin:15px 0 0;max-width:64ch;font-family:Figtree,system-ui,sans-serif;
  font-size:16px;line-height:1.62;color:var(--muted);text-wrap:pretty}
.pdp-desc .lead p{margin:0 0 11px}
.pdp-desc .lead p:last-child{margin-bottom:0}
.pdp-desc .lead b{color:var(--ink);font-weight:700}

.pdp-desc .sub{display:block;margin:30px 0 13px;font-family:Figtree,system-ui,sans-serif;
  font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* cuatro tarjetas a lo ancho: el mismo lenguaje que .pdp-facts —borde,
   paper-alt, disco jade— pero con una línea de detalle debajo del dato,
   que es lo que arriba no cabe. */
.pdp-desc .nut{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
  margin:0;padding:0;list-style:none}
.pdp-desc .nut li{border:1px solid var(--line);border-radius:14px;padding:16px;
  background:var(--paper-alt)}
.pdp-desc .nut .ic{width:32px;height:32px;border-radius:50%;background:var(--jade-bg);
  display:flex;align-items:center;justify-content:center;color:var(--jade-dark)}
.pdp-desc .nut .ic svg{width:17px;height:17px;display:block}
.pdp-desc .nut .k{display:block;margin:13px 0 4px;font-family:Figtree,system-ui,sans-serif;
  font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.pdp-desc .nut .v{display:block;font-family:'Archivo Black',Archivo,sans-serif;font-weight:400;
  font-size:22px;line-height:1.15;letter-spacing:-.015em;color:var(--ink)}
.pdp-desc .nut .d{display:block;margin-top:8px;font-family:Figtree,system-ui,sans-serif;
  font-size:13px;line-height:1.55;color:var(--muted);text-wrap:pretty}

.pdp-desc .nota{margin:14px 0 0;font-family:Figtree,system-ui,sans-serif;font-size:12.5px;
  line-height:1.6;color:var(--muted)}

/* ============================================================
   BARRA FIJA INFERIOR (móvil)
   Aparece cuando el CTA original ya salió de pantalla, no desde el
   primer píxel: si sale de entrada tapa el precio que acaba de leer.
   ============================================================ */
.pdp-bar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;
  align-items:center;gap:10px;
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  padding:10px var(--pad-x) calc(10px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -14px 34px -22px var(--shadow);
  transform:translateY(115%);transition:transform var(--t-move) var(--ease-out)}
@supports not (backdrop-filter:blur(1px)){.pdp-bar{background:var(--paper)}}
.pdp-bar.is-on{transform:none}
/* ---- lo que dice la barra, en tres renglones y no en cuatro ----
   Nombre arriba; el precio con su tachado AL LADO, no encima (antes el
   tachado se llevaba un renglón entero y la barra medía ~100 px); y el
   precio por porción abajo. La rejilla coloca cada pieza sin tocar el
   orden del HTML, que es el que leen los lectores de pantalla. */
.pdp-bar .bp{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;
  column-gap:6px;row-gap:2px;min-width:0;flex:1 1 auto}
.pdp-bar .bp .k{grid-column:1/-1;font-family:Figtree,system-ui,sans-serif;font-size:10.5px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdp-bar .bp .v{grid-column:1;grid-row:2;font-family:'Archivo Black',Archivo,sans-serif;font-size:21px;
  letter-spacing:-.02em;line-height:1.1;color:var(--ink);white-space:nowrap}
.pdp-bar .bp .w{grid-column:2;grid-row:2}
.pdp-bar .bp .pp{grid-column:1/-1}
/* "Comprar ahora" en UN renglón, siempre. Partido en dos se leía como dos
   palabras sueltas y perdía peso frente al botón de al lado. Mide lo que
   mide su texto; el que cede ancho es el bloque del precio. */
.pdp-bar .cta-buy{flex:none;width:auto;min-width:0;min-height:50px;padding:0 18px;font-size:15.5px;margin:0;
  border-radius:14px;box-shadow:none;white-space:nowrap}
/* el hueco que impide que la barra tape el final del contenido: mide lo
   que mide la barra (producto.js escribe --pdp-bar-h), no un número fijo */
.pdp-tail{display:none;height:0}

/* ============================================================
   MEDIA QUERIES — todas después de sus reglas base
   Escala del sitio: 1024 tableta · 700 compacto · 560 teléfono · 380 estrecho
   ============================================================ */
@media (max-width:1024px){
  /* minmax(0,1fr) y no 1fr: un track "1fr" tiene suelo min-content, y el
     min-content de esta columna es el ancho intrínseco de la foto —758 px—,
     así que la galería se salía del teléfono y la foto llegaba cortada por la
     derecha. Comprobado a 320, 360, 390 y 430. */
  .pdp{grid-template-columns:minmax(0,1fr);gap:30px;padding-top:18px}
  .pdp-media{position:static;min-width:0}
  .gal-main{border-radius:18px}
  /* la píldora encima de la foto compite con el pulgar y con el H1:
     a una columna se lee mejor arriba del título */
  .gal-badge{display:none}
  .pdp-badge{display:inline-flex}
  .pdp-lead{max-width:none}
  /* a una columna la caja de compra puede ensancharse hasta el borde del
     texto; a partir de aquí manda el ancho de lectura, no el de la rejilla */
  .pdp-trust{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
  /* a dos columnas la línea de detalle deja de partirse en palabra por renglón */
  .pdp-desc{padding-bottom:clamp(34px,5vw,50px)}
  .pdp-desc .nut{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  .pdp{padding-left:var(--pad-x);padding-right:var(--pad-x)}
  .pdp-desc{padding-left:var(--pad-x);padding-right:var(--pad-x)}
  .pdp-bar{display:flex}
  .pdp-tail{display:block;height:calc(var(--pdp-bar-h,84px) + 8px)}
  .gal-thumbs button{width:74px;height:74px}
  .pdp-facts{gap:9px}
  .acc summary{min-height:var(--tap)}
  /* La barra fija ya lleva el "Comprar ahora" a mano del pulgar durante todo
     el scroll. El de dentro de la caja sigue siendo el principal: no se
     esconde, solo deja de ser el único. */
  .buybox{padding:16px}
}
@media (max-width:560px){
  .pdp{gap:26px;padding-bottom:var(--gap-section)}
  .pdp-title{font-size:clamp(27px,7.6vw,34px)}
  .pdp-lead{margin-top:12px;font-size:15.5px}

  /* ---- por qué la rejilla de datos NO baja a una columna ----
     Bajaba, y era el error de móvil más caro de la ficha: cuatro filas de
     52 px empujaban el precio y las presentaciones fuera del alcance del
     primer scroll. En un teléfono de 390 px el cliente veía la foto, el
     título, un párrafo y cuatro fichas antes de enterarse de cuánto cuesta.

     A dos columnas ocupan la mitad del alto y siguen siendo legibles
     porque lo que hay dentro son cifras cortas. El icono se achica pero no
     desaparece: es lo que hace que la rejilla se lea de un vistazo en vez
     de como un bloque de texto. Por debajo de 380 px sí vuelve a una
     columna — ver más abajo. */
  .pdp-desc .lead{font-size:15.5px}
  .pdp-desc .sub{margin-top:26px}
  .pdp-desc .nut{gap:10px}
  .pdp-desc .nut li{padding:13px}
  .pdp-desc .nut .v{font-size:19px}
  .pdp-desc .nut .d{font-size:12.5px}

  .pdp-facts{grid-template-columns:1fr 1fr;gap:8px;margin-top:20px}
  .pdp-facts li{padding:11px 11px;gap:9px}
  .pdp-facts .ic{width:25px;height:25px}
  .pdp-facts .ic svg{width:14px;height:14px}
  .pdp-facts .k{font-size:10px;letter-spacing:.07em}
  .pdp-facts .v{font-size:13.5px}

  /* La foto cuadrada a ancho completo se come un viewport entero antes de
     que aparezca una sola palabra. 4:3 deja ver el producto igual de bien
     —es un recorte sobre fondo liso— y devuelve ~90 px al primer pliegue. */
  .gal-main{aspect-ratio:4/3}

  .gal-main{border-radius:16px}
  .gal-nav button{width:var(--tap);height:var(--tap)}
  /* ---- en el teléfono, sin carril de miniaturas (2026-09-27) ----
     Se desliza la foto con el dedo (producto.js) y el contador "1 / 6" dice
     cuántas hay. El carril se llevaba 76 px del primer pliegue —justo los
     que faltaban para que se viera un precio sin hacer scroll— y, en
     Antara, ~650 KB de fotos grandes pintadas a 66 px. Con display:none las
     miniaturas lazy ni se descargan. En tableta y escritorio sigue igual. */
  .gal-thumbs{display:none}
  .gal-count{right:11px;bottom:11px;padding:5px 10px;font-size:11px}

  .opt{grid-template-columns:20px 50px minmax(0,1fr) auto;gap:11px;
    padding:12px 13px 12px 12px;min-height:70px;border-radius:14px}
  .opt .th{width:50px;height:50px;border-radius:11px}
  .opt .nm .n{font-size:15px}
  .opt .nm .s{font-size:12.5px}
  .opt .pr{font-size:20px}
  .opt .flag{font-size:9px;padding:3px 8px}

  .chips{gap:9px}
  .chips .chip{min-height:var(--tap);font-size:14px;padding:0 15px 0 13px;gap:9px}
  .chips .chip .tag{padding:3px 7px;font-size:9px}

  .buybox{padding:15px;border-radius:18px}
  .bb-top{padding-bottom:14px}
  .qtys{gap:8px}
  .qty{min-height:70px;padding:10px 5px;border-radius:13px}
  .qty .q{font-size:18px}
  .qty .t{font-size:12px}
  .cta-buy{min-height:54px;font-size:16px}
  .cta-cart{min-height:52px}
  .cta-wa{min-height:var(--tap)}
  .pdp-trust{grid-template-columns:1fr;gap:11px}
  .pdp-pay svg{width:40px;height:25px}
  .pdp-social{margin-top:16px;padding-top:14px}
  .pdp-social .row{gap:8px}
  .pdp-ayuda{gap:11px;padding:12px 13px}
  .pdp-ayuda .av{width:42px;height:42px;font-size:18px}
  .pdp-ayuda .tx b{font-size:14px}
  .opt .ribbon{left:12px;font-size:9px;padding:3px 9px}

  .acc summary{font-size:15px}
  .acc .panel p,.acc .panel ul{font-size:14px}
}
@media (max-width:440px){
  /* El botón de agregar de la barra fija se queda en icono por debajo de
     560 px. Esa regla vive en carrito.css, junto a la base del botón: aquí
     perdía contra ella por orden de carga (misma especificidad, carrito.css
     va después) y el icono se estiraba hasta partir "Comprar ahora" en dos
     renglones. */
  /* Con cuatro cantidades, cuatro columnas en un teléfono dejan la tarjeta en
     58 px y el total ("$2,800", que no parte) se sale. Dos filas de dos, que
     además se comparan mejor con el pulgar. */
  .qtys[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ---- la miniatura de la tarjeta de presentación se retira antes ----
   Se retiraba a 380 px. Con ella puesta, en un teléfono de 390 la columna
   del nombre se quedaba en ~120 px y el resultado era "Antara Colosal /
   2 kg" partido en dos renglones, el rendimiento en tres, y la pastilla de
   envío gratis apretada contra el precio.

   Lo que decide la compra en esta tarjeta es el nombre, lo que rinde y el
   precio. La foto ya está a tamaño completo en la galería de arriba, y a
   50 px las dos presentaciones del mismo producto se ven casi idénticas.
   Se va la que menos informa. */
@media (max-width:480px){
  .opt{grid-template-columns:20px minmax(0,1fr) auto;gap:11px}
  .opt .th{display:none}
  .opt .pr{font-size:20px}
  .opt .nm .s{font-size:12px;line-height:1.35}
}
@media (max-width:380px){
  /* a 320–375 dos columnas dejan cada dato en cuatro renglones: peor que
     el alto que ahorran. Aquí sí vuelve a una columna. */
  .pdp-facts{grid-template-columns:1fr}
  .pdp-desc .nut{grid-template-columns:1fr}
  .opt{gap:10px}
  .opt .pr{font-size:19px}
  .pdp-bar{gap:9px}
  .pdp-bar .bp .v{font-size:19px}
  .pdp-bar .cta-buy{padding:0 13px;font-size:15px}
  .buybox{padding:14px}
  .pdp-pay{gap:7px}
  .pdp-pay .tx{flex-basis:100%;text-align:center;padding:0}
}

/* a 320 el tachado de la barra ya no cabe al lado del precio: se va él, no
   el precio que se cobra */
@media (max-width:340px){
  .pdp-bar .bp .w{display:none}
}

/* ---- respeto por quien pidió menos movimiento ---- */
@media (prefers-reduced-motion:reduce){
  .pdp-bar,.gal-main img,.acc summary svg,.opt .dot::after,
  .opt,.qty,.chips .chip,.cta-buy,.gal-thumbs button{transition-duration:1ms}
  .cta-buy:hover:not(:disabled){transform:none}
}

/* ============================================================
   Pie de la ficha: el resto del catálogo
   Mismas píldoras que cierran las páginas de categoría.
   ============================================================ */
.pdp-otras{max-width:1120px;margin:0 auto;padding:30px 24px 56px;border-top:1px solid var(--line)}
.pdp-otras .h{font-family:Figtree,system-ui,sans-serif;font-size:12px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pdp-otras .row{display:flex;flex-wrap:wrap;gap:10px;margin-top:15px}
.pdp-otras a{display:inline-flex;align-items:center;min-height:44px;
  border:1px solid var(--line);border-radius:999px;padding:10px 18px;
  font-size:14px;font-weight:700;color:var(--jade-dark);background:var(--paper);
  transition:border-color var(--t-state) ease,background-color var(--t-state) ease}
.pdp-otras a:hover{border-color:var(--jade-light);background:var(--jade-bg)}
.pdp-otras a.home{background:var(--jade);border-color:var(--jade);color:var(--tile-text)}
.pdp-otras a.home:hover{background:var(--jade-dark);border-color:var(--jade-dark)}
@media (max-width:560px){
  .pdp-otras{padding:26px var(--pad-x) var(--gap-section)}
  /* píldoras de anchos distintos, una por línea, dejaban el borde en zigzag */
  .pdp-otras .row{flex-direction:column;gap:8px;margin-top:13px}
  .pdp-otras a{width:100%;border-radius:12px;min-height:var(--tap);font-size:14.5px}
}