/* pp-sitio.css — cabecera, pie y letras del diseño nuevo en las páginas del sitio.
   GENERADO a partir de la portada (public/index.html) con cromo-sitio.js: no editar a mano. */

/* 1. Letras (las mismas de la portada, servidas desde el sitio) */
/* letras:inicio — las de Amino Club: Anek Telugu (texto y títulos) y Poppins (botones, enlaces y etiquetas) (fuente-amino.js) */
@font-face { font-family: 'Anek Telugu'; font-style: normal; font-weight: 100 800; font-display: swap; src: url(/assets/fonts/anek-telugu-latin.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/poppins-400-latin.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/poppins-500-latin.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/poppins-600-latin.woff2) format('woff2'); }
@font-face { font-family: 'Anek Respaldo'; font-style: normal; font-weight: 100 550; src: local('Arial'), local('ArialMT'), local('Roboto'), local('Roboto-Regular'), local('Helvetica'), local('Liberation Sans'); size-adjust: 91%; ascent-override: 98.9%; descent-override: 65.9%; line-gap-override: 0%; }
@font-face { font-family: 'Anek Respaldo'; font-style: normal; font-weight: 551 900; src: local('Arial Bold'), local('Arial-BoldMT'), local('Roboto Bold'), local('Roboto-Bold'), local('Helvetica Bold'), local('Liberation Sans Bold'); size-adjust: 89.9%; ascent-override: 100.1%; descent-override: 66.7%; line-gap-override: 0%; }
@font-face { font-family: 'Poppins Respaldo'; font-style: normal; font-weight: 100 550; src: local('Arial'), local('ArialMT'), local('Roboto'), local('Roboto-Regular'), local('Helvetica'), local('Liberation Sans'); size-adjust: 112.5%; ascent-override: 93.3%; descent-override: 31.1%; line-gap-override: 8.9%; }
@font-face { font-family: 'Poppins Respaldo'; font-style: normal; font-weight: 551 900; src: local('Arial Bold'), local('Arial-BoldMT'), local('Roboto Bold'), local('Roboto-Bold'), local('Helvetica Bold'), local('Liberation Sans Bold'); size-adjust: 106.3%; ascent-override: 98.8%; descent-override: 32.9%; line-gap-override: 9.4%; }
:root { --pp-letra: 'Anek Telugu', 'Anek Respaldo', system-ui, sans-serif; --pp-letra-boton: 'Poppins', 'Poppins Respaldo', 'Anek Telugu', 'Anek Respaldo', system-ui, sans-serif; }
/* letras:fin */
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url(/assets/fonts/jetbrains-mono-latin.woff2) format('woff2'); }

/* 2. Escala de escritorio que usan la cabecera y el pie */
@media (min-width: 1024px) { :root { --ppd-k: 0.8; --ppd-espacio: 0.8; --ppd-ancho: 0.9; --ppd-alto: 0.9; --ppd-bloque: 0.88; } }

/* 3. Cabecera y pie: base (en la portada la heredan de su envoltorio) */
header[data-pp-cromo], footer[data-pp-cromo] { font-family: var(--pp-letra); -webkit-font-smoothing: antialiased; text-align: left; line-height: 1.5; }
[data-pp-cromo], [data-pp-cromo] *, [data-pp-cromo] *::before, [data-pp-cromo] *::after { box-sizing: border-box; }
[data-pp-cromo] a { text-decoration: none; }
[data-pp-cromo] img, [data-pp-cromo] svg { display: inline-block; max-width: none; }

/* 3b. Cabecera blanca, translúcida al bajar (la misma hoja que lleva la portada en <style data-pp-cabecera>) */
/* cabecera:inicio — blanca como la de la tienda vieja; translúcida al bajar (cabecera-blanca.js; no editar a mano) */
header[data-pp-cab] { position: sticky; top: 0; z-index: 50; color: #0a192f; background: #fff; border-bottom: 1px solid #e5e7eb; transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease; }
/* al bajar: blanco casi opaco donde no hay desenfoque; translúcido y desenfocado donde lo hay */
html.pp-cab-baja header[data-pp-cab] { background: rgba(255, 255, 255, .96); border-bottom-color: rgba(10, 25, 47, .08); box-shadow: 0 8px 24px -14px rgba(10, 25, 47, .35); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { html.pp-cab-baja header[data-pp-cab] { background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); } }
@media (prefers-reduced-motion: reduce) { header[data-pp-cab], header[data-pp-cab] * { transition: none !important; } }
header[data-pp-cab] > nav { max-width: calc(1320px * var(--ppd-ancho, 1)); margin: 0 auto; padding: 0 calc(clamp(12.8px, 3.2vw, 32px) * var(--ppd-espacio, 1)); height: 64px; display: flex; align-items: center; gap: 16px; }
header[data-pp-cab] [data-pp-logo] { display: flex; align-items: center; align-self: stretch; flex-shrink: 0; }
header[data-pp-cab] [data-pp-logo] img { display: block; width: clamp(150px, 46vw, 190px); max-width: none; height: auto; }
header[data-pp-cab] [data-pp-cab-enlaces] { display: flex; flex: 1 1 0%; justify-content: center; align-items: center; gap: clamp(18px, 2.5vw, 36px); min-width: 0; }
header[data-pp-cab] [data-pp-cab-enlaces] a { font-family: var(--pp-letra-boton, 'Poppins', system-ui, sans-serif); font-size: 13px; font-weight: 600; line-height: 1.6; color: #374151; padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap; text-decoration: none; transition: color .15s ease, border-color .15s ease; }
@media (hover: hover) { header[data-pp-cab] [data-pp-cab-enlaces] a:hover { color: #0a192f; } }
header[data-pp-cab] [data-pp-cab-enlaces] a[aria-current="page"] { color: #0a192f; border-bottom-color: #0a192f; }
header[data-pp-cab] [data-pp-cab-der] { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
header[data-pp-cab] [data-pp-carrito], header[data-pp-cab] [data-pp-menu-btn] { position: relative; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; margin: 0; border: 0; border-radius: 999px; background: transparent; color: #1f2937; cursor: pointer; transition: background-color .15s ease; }
/* el gris al pasar el ratón, solo con ratón: en el teléfono se quedaba pegado tras tocar */
@media (hover: hover) { header[data-pp-cab] [data-pp-carrito]:hover, header[data-pp-cab] [data-pp-menu-btn]:hover { background: rgba(10, 25, 47, .06); } }
header[data-pp-cab] [data-pp-carrito] svg, header[data-pp-cab] [data-pp-menu-btn] svg { display: block; }
/* el globo del número: solo con algo en el carrito (pp-sitio.js, la portada y carrito.js ponen «Carrito vacío» en 0) */
header[data-pp-cab] [data-pp-carrito-n] { position: absolute; top: -1px; right: -2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: #0a192f; color: #fff; font-family: var(--pp-letra-boton, 'Poppins', system-ui, sans-serif); font-size: 10px; font-weight: 600; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px #fff; }
header[data-pp-cab] [data-pp-carrito]:is([aria-label="Carrito vacío"], [aria-label="Carrito de compras"]) [data-pp-carrito-n] { display: none; }
header[data-pp-cab] [data-pp-cab-contacto] { height: 40px; padding: 0 18px; display: inline-flex; align-items: center; gap: 8px; border-radius: 8px; background: #0a192f; color: #fff; font-family: var(--pp-letra-boton, 'Poppins', system-ui, sans-serif); font-size: 13px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; text-decoration: none; transition: background-color .15s ease; }
@media (hover: hover) { header[data-pp-cab] [data-pp-cab-contacto]:hover { background: #1b2d4a; } }
header[data-pp-cab] [data-pp-cab-contacto] svg { display: block; flex-shrink: 0; }
@media (max-width: 759px) { header[data-pp-cab] [data-pp-carrito] { width: 44px; } header[data-pp-cab] [data-pp-cab-der] { gap: 4px; } }
/* menú del teléfono: blanco, texto oscuro */
header[data-pp-cab] [data-pp-cab-menu] { display: flex; flex-direction: column; padding: 6px calc(clamp(12.8px, 3.2vw, 32px) * var(--ppd-espacio, 1)) 20px; background: #fff; border-top: 1px solid #eef0f4; box-shadow: 0 18px 28px -20px rgba(10, 25, 47, .45); }
header[data-pp-cab] [data-pp-cab-menu] a { padding: 14px 4px; font-family: var(--pp-letra-boton, 'Poppins', system-ui, sans-serif); font-size: 15px; font-weight: 500; color: #1f2937; border-bottom: 1px solid #f0f2f5; text-decoration: none; }
header[data-pp-cab] [data-pp-cab-menu] a[aria-current="page"] { color: #0a192f; font-weight: 600; }
header[data-pp-cab] [data-pp-cab-menu] a[data-pp-cab-menu-wa] { margin-top: 16px; height: 46px; padding: 0 16px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 10px; background: #0a192f; color: #fff; font-weight: 600; }
header[data-pp-cab] a:focus-visible, header[data-pp-cab] button:focus-visible { outline: 2px solid #0a192f; outline-offset: 3px; }
header[data-pp-cab] [data-pp-cab-contacto]:focus-visible, header[data-pp-cab] a[data-pp-cab-menu-wa]:focus-visible { outline: 3px solid #E9C46A; outline-offset: 2px; }
/* menú del teléfono abierto (2026-10-04): la página de debajo no se desplaza y un toque fuera del menú lo cierra.
   La capa que recibe ese toque es transparente (sin velo oscuro): el menú se ve igual que antes. La pone JS_BAJAR. */
html.pp-menu-abierto { overflow: hidden; scrollbar-gutter: stable; }
[data-pp-menu-velo] { position: fixed; inset: 0; z-index: 49; background: transparent; -webkit-tap-highlight-color: transparent; touch-action: none; }
/* el botón flotante de WhatsApp (56 px, fijo abajo a la derecha; se ve hasta 759 px) tapaba lo último del pie: con la
   página al fondo, el pie gana 80 px abajo, con su mismo fondo (en la portada el pie va detrás de main; en el resto lleva
   data-pp-cromo). El flotante no cambia. */
@media (max-width: 759px) { body:has([data-pp-flotante]) :is(footer[data-pp-cromo], main ~ footer) { padding-bottom: 80px; } }
/* cabecera:fin */

/* 4. Reglas de la portada para esas piezas (variantes de escritorio/teléfono, menú, hover, flotante) */
@media (hover: hover) { .scpa:hover { background: rgba(255, 255, 255, 0.12) !important; color: rgb(255, 255, 255) !important; } }
@media (hover: hover) { .scpb:hover { color: rgb(255, 255, 255) !important; } }
@media (max-width: 759px) { [data-pp-solo="desk"] { display: none !important; } }
@media (min-width: 760px) { [data-pp-solo="mob"] { display: none !important; } }
[data-pp-menu] { display: none !important; }
[data-pp-menu].abierto { display: contents !important; }
[data-pp-flotante] { position: fixed; right: 16px; bottom: 16px; width: 56px; height: 56px; border-radius: 50%; background: #0A192F; display: none; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(10,25,47,.35); z-index: 60; }
[data-pp-flotante]:focus-visible { outline: 3px solid #E9C46A; outline-offset: 2px; }
@media (max-width: 759px) { [data-pp-flotante] { display: flex; } }
[data-pp-salto] { position: absolute; left: 16px; top: -120px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: #0A192F; color: #fff; font-family: var(--pp-letra-boton); font-weight: 600; font-size: 14px; text-decoration: none; }
[data-pp-salto]:focus { top: 12px; outline: 3px solid #E9C46A; outline-offset: 2px; }
@media (max-width: 759px) { [data-pp-menu-btn] { width: 44px !important; height: 44px !important; } [data-pp-carrito] { height: 44px !important; } }
[data-pp-pie] { display: inline-block; padding: 5px 0; margin: -5px 0; }
@media (min-width: 760px) and (max-width: 899px) { header [data-pp-solo="desk"] > a[href^="https://wa.me/"] { font-size: 0 !important; gap: 0 !important; padding: 0 12px !important; } }

/* 5. Enlace «Saltar al contenido» y botón flotante */
[data-pp-salto] { position: absolute; left: 16px; top: -120px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: #0A192F; color: #fff; font-family: var(--pp-letra-boton); font-weight: 600; font-size: 14px; text-decoration: none; }
[data-pp-salto]:focus { top: 12px; outline: 3px solid #E9C46A; outline-offset: 2px; }

/* 6. Letras del diseño nuevo en las páginas heredadas */
body[class] { --font-anek: var(--pp-letra); --font-poppins: var(--pp-letra-boton); --font-roboto: var(--pp-letra); --font-marcellus: var(--pp-letra); --font-fraunces: var(--pp-letra); --font-stack-display: var(--pp-letra); --font-club-serif: var(--pp-letra); --font-stack-mono: 'JetBrains Mono', ui-monospace, monospace; }
body { font-family: var(--pp-letra); }
code, kbd, samp, pre, .font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
code,kbd,samp,pre { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.txt-compact-small-plus { font-family: var(--pp-letra); }
.txt-compact-small { font-family: var(--pp-letra); }
.txt-medium { font-family: var(--pp-letra); }
.font-\[Roboto\,sans-serif\] { font-family: var(--pp-letra); }
.font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
:is([id^="pg-articulo"],[id^="pg-legal"]) .pg-leer { font-family: var(--pp-letra); }
:is([id^="pg-articulo"],[id^="pg-legal"]) .pg-indice a::before { font-family: var(--pp-letra); }
.pp-coa-pill { font-family: var(--pp-letra-boton); }
.pp-coa-ficha-labcab b { font-family: var(--pp-letra); }
.pp-coa-ficha-eti, .pp-coa-ficha-eti2 { font-family: var(--pp-letra); }
.pp-coa-ficha-num span { font-family: var(--pp-letra); }
.pp-coa-ficha-num i { font-family: var(--pp-letra); }
.pp-coa-ficha-datos dt { font-family: var(--pp-letra); }
.pp-coa-ficha-datos dd { font-family: var(--pp-letra); }
.pp-coa-ficha-sellos span { font-family: var(--pp-letra); }
.pp-coa-ficha-boton { font-family: var(--pp-letra-boton); }
.pp-coa-ficha-regcab p { font-family: var(--pp-letra); }
.pp-coa-ficha-cuenta { font-family: var(--pp-letra); }
.pp-coa-ficha-mg b { font-family: var(--pp-letra); }
.pp-coa-ficha-chip, .pp-coa-res-chip { font-family: var(--pp-letra-boton); }
.pp-coa-res-nombre { font-family: var(--pp-letra); }
.pp-coa-res-mg { font-family: var(--pp-letra); }
.pp-coa-modal-cab h2 { font-family: var(--pp-letra); }
.pp-coa-modal-verificar { font-family: var(--pp-letra-boton); }
.pp-coa-modal-lista-t { font-family: var(--pp-letra); }
.pp-coa-modal-lista-mg { font-family: var(--pp-letra); }
.pp-busca-pep-quien b { font-family: var(--pp-letra); }
.pp-busca-pep-coa { font-family: var(--pp-letra); }
.pp-busca-pep-precio { font-family: var(--pp-letra); }
.prose code { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* 8. Comodidad en el teléfono (cromo-sitio.js, 2026-10-04) */
/* 8a. Fichas, «Se piden juntos»: en el teléfono las flechas no se ven (hidden sm:flex) y la pista solo la movían ellas:
   de 12 tarjetas se veía una. Por debajo de 640 px el carril se desliza con el dedo, tarjeta a tarjeta, como el de la
   portada; desde 640 px siguen las flechas (behaviors.js 2b). */
@media (max-width: 639.98px) {
  div.relative:has(> button[aria-label="Productos siguientes"]) > div.relative > div.overflow-hidden { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  div.relative:has(> button[aria-label="Productos siguientes"]) > div.relative > div.overflow-hidden::-webkit-scrollbar { display: none; }
  div.relative:has(> button[aria-label="Productos siguientes"]) > div.relative > div.overflow-hidden > div.flex { transform: none !important; }
  div.relative:has(> button[aria-label="Productos siguientes"]) > div.relative > div.overflow-hidden > div.flex > * { scroll-snap-align: start; }
}
/* 8b. Fichas: el brillo animado de «certificado de cada lote» (text-shadow, brillo, resplandor y chispas) se para cuando
   su sección no está en pantalla (pp-sitio.js le pone .pp-anim-pausa); en pantalla se ve igual que antes. Y quieto si
   el sistema pide menos movimiento. */
.pp-anim-pausa :is(.animate-text-glow, .animate-shimmer, .animate-pulse-glow, [class*="animate-sparkle"]) { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { :is(.animate-text-glow, .animate-shimmer, .animate-pulse-glow, [class*="animate-sparkle"]) { animation: none !important; } }
/* 8c. Tienda: los botones de categoría se pintaban primero con Anek (más estrecha, ya precargada) en menos filas y, al
   llegar Poppins, pasaban a más filas y empujaban la rejilla 42 px. La caja reserva su alto final con Poppins (medido
   el 2026-10-04: 4 filas hasta 353 px, 3 hasta 426 px, 2 hasta 639 px). Si cambian las categorías, volver a medir con
   pruebas-web/_movil-chips-alto.js. */
@media (max-width: 353.98px) { [data-testid="category-chips"] { min-height: 162px; align-content: flex-start; } }
@media (min-width: 354px) and (max-width: 426.98px) { [data-testid="category-chips"] { min-height: 120px; align-content: flex-start; } }
@media (min-width: 427px) and (max-width: 639.98px) { [data-testid="category-chips"] { min-height: 78px; align-content: flex-start; } }
/* 8d. Saltos a anclas que quedaban debajo de la cabecera fija de 65 px: «Saltar al contenido» (teclado) y el índice de
   los artículos del blog (/blog/<slug>: el título de la sección quedaba tapado). Sin html { scroll-padding-top }: se
   sumaría a los 92–96 px que ya llevan las secciones de las páginas legales. */
:is(#contenido, #main-content, #pp-checkout, [id^="pg-articulo-"], [id^="pg-legal-"], #pg-articulos-html) { scroll-margin-top: 96px; }
:is(.pg-art-cuerpo, nav[aria-label="Índice de contenidos"] ~ div) :is(h2, h3, h4)[id] { scroll-margin-top: 96px; }

/* 7. Ajustes por el cambio de letra */
/* ajustes de letra:inicio (fuente-amino.js; no editar a mano) */
/* el <body> de BrandLayout lleva la clase font-poppins: el texto corrido es Anek igualmente */
body.font-poppins { font-family: var(--pp-letra); }
/* los títulos, siempre en la letra de texto aunque estén dentro de un enlace (en Amino Club todos los h1–h3 son Anek) */
h1, h2, h3, h4, h5, h6 { font-family: var(--pp-letra); }
/* los campos, en la letra de texto (como Amino Club): con Poppins el texto de ejemplo del buscador de certificados no cabía en el teléfono */
input.font-poppins, textarea.font-poppins, select.font-poppins { font-family: var(--pp-letra); }
/* los párrafos de lectura que la plantilla marcaba como Poppins (certificados) son texto; las etiquetas (mayúsculas, cejillas) siguen en Poppins */
p.font-poppins:not(.uppercase):not(.pg-cejilla) { font-family: var(--pp-letra); }
/* los filtros de Artículos son botones (su all:unset los dejaba en la letra de texto) */
.pg-filtro { font-family: var(--pp-letra-boton); }
/* pie: las listas de enlaces van en la letra de texto (así los países con enlace y los «próximamente», que no lo tienen, salen iguales y caben en un renglón); el enlace del aviso legal, como su frase */
footer span ~ a { font-family: var(--pp-letra); }
footer p a { font-family: inherit; }
/* ajustes de letra:fin */


/* Ficha de producto: la tarjeta del vial ocupa su columna del grid.
 * En los productos con una sola presentación (sin botones de dosis) la tarjeta se encogía
 * a ~66px (solo su padding) y el vial —con max-width:100%— quedaba en 0px, así que la ficha
 * salía con el hueco vacío. min-width resuelve el encogido sin afectar a las que ya iban bien.
 * La clase pp-vial la pone la tarjeta que envuelve la imagen principal de cada ficha. */
.pp-vial { min-width: 100%; }

/* La tarjeta del vial SÍ se estira hasta la altura de la columna de compra, igual
 * que en la ficha de Venezuela (allí tarjeta y columna miden lo mismo: 791px a
 * 1440). Estuvo un tiempo con sticky + align-self:start para no dejar hueco, pero
 * así la tarjeta se quedaba en 450px y desentonaba con la columna derecha.
 * El vial va centrado dentro de la tarjeta y crece un poco con ella (ver abajo). */
@media (min-width: 1024px) {
  .pp-vial img {
    max-height: clamp(380px, 46vh, 520px);
  }
  /* Selank y Semax se presentan en spray nasal: el frasco es más estrecho que un
   * vial, así que a la misma altura se veía pequeño. Se le da algo más de alto. */
  .pp-vial--alto img {
    max-height: clamp(440px, 64vh, 660px);
  }
}
}

/* --- Presentaciones agotadas (ficha de producto) ---------------------------------
 * La presentación sigue VISIBLE y SELECTABLE: el comprador ve precio y ficha, y el
 * botón de compra pasa a «Agotado». Ocultarlas o deshabilitarlas rompe la UX y resta
 * variantes indexables al SEO.
 * OJO: la clase es «pp-pres-agotada». «pp-agotado» (marca-navy.css) es el badge
 * absoluto de las tarjetas y aquí sacaría el botón del flujo. */
[data-pp-pres].pp-pres-agotada {
  opacity: .62;
  border-style: dashed !important;
}
[data-pp-pres].pp-pres-agotada .pp-pres-tag {
  display: block;
  margin-top: 2px;
  font-family: Poppins, system-ui, sans-serif;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  color: #b91c1c;
}
[data-pp-pres].pp-pres-agotada[aria-pressed="true"] {
  background: #ffffff !important;
  color: #6b7280 !important;
  border-color: #d1d5db !important;
}

/* La etiqueta «Agotado» alarga cada pill: permitimos que la fila haga wrap para que
 * nunca se monte sobre el precio de la derecha. */
main div.flex.gap-2:has(> [data-pp-pres]) {
  flex-wrap: wrap;
  gap: .25rem;
  row-gap: .3rem;
}
[data-pp-pres].pp-pres-agotada {
  padding-left: .5rem;
  padding-right: .5rem;
}
[data-pp-pres].pp-pres-agotada .pp-pres-tag {
  font-size: 8px;
  margin-top: 1px;
}

/* --- Tarjeta de catálogo agotada -------------------------------------------------
 * La tarjeta SIGUE en el grid (no se saca del flujo): solo se apaga visualmente y
 * el botón de compra se bloquea. La clase «pp-agotado» de marca-navy.css es un badge
 * con position:absolute y NO debe usarse sobre el <li> (sacaba todas las tarjetas
 * agotadas del grid y las apilaba una encima de otra). */
li[data-pp-nombre].pp-card-agotada .group > div:first-child img,
li[data-pp-nombre].pp-card-agotada img {
  filter: grayscale(.35) opacity(.8);
}
li[data-pp-nombre].pp-card-agotada [data-testid="quick-add-button"],
li[data-pp-nombre].pp-card-agotada [data-pp-anadir] {
  opacity: .5;
  cursor: not-allowed;
}
li[data-pp-nombre].pp-card-agotada { position: relative; }
li[data-pp-nombre].pp-card-agotada::after {
  content: "Agotado";
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 15;
  background: rgba(10, 25, 47, .92);
  color: #fff;
  font-family: Poppins, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  pointer-events: none;
}

/* Botón de compra de una tarjeta agotada: se queda EN SU SITIO (nada de
 * position:absolute, que lo convertía en una pill gigante y lo sacaba del pie). */
[data-testid="quick-add-button"].pp-btn-agotado,
[data-pp-anadir].pp-btn-agotado {
  background: rgba(10, 25, 47, .07) !important;
  color: rgba(10, 25, 47, .45) !important;
  cursor: not-allowed;
  opacity: 1;
}

@media (min-width: 860px) {
}

/* --- CTA de clínicas y mayoristas (ficha de producto) -------------------------
 * Botón compacto junto a «Cantidad», como en la ficha de Venezuela: la tarjeta
 * grande cargaba la columna y competía con «Añadir al carrito».
 * Sin porcentajes: el precio se acota por volumen y el crédito va con «si aplica». */
.pp-cantidad { flex-wrap: wrap; row-gap: 8px; }
.pp-mayorista-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  margin-left: auto;
  min-height: 36px; padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(10, 25, 47, 0.16);
  background: #f7f9fc;
  color: #0a192f;
  font-family: Poppins, system-ui, sans-serif;
  font-size: 11.5px; font-weight: 600; line-height: 1.1;
  text-decoration: none; white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.pp-mayorista-btn:hover { background: #eef3fa; border-color: rgba(10, 25, 47, 0.42); }
.pp-mayorista-btn svg { width: 14px; height: 14px; flex: none; }
.pp-mayorista-btn--ancho { display: flex; width: 100%; margin: 0 0 12px; }
/* Cinturón y tirantes: el bloque móvil ya es lg:hidden, pero si esa utilidad
 * faltara en el CSS compilado el botón ancho se duplicaría en escritorio. */
@media (min-width: 1024px) { .pp-mayorista-btn--ancho { display: none; } }
@media (max-width: 479px) {
  .pp-mayorista-btn { margin-left: 0; flex-basis: 100%; }
}