/* TP3D Píldoras — front
   Las píldoras van en el flujo normal (no absolutas): nunca tapan la foto ni se pisan.
   Si no entran a lo ancho, bajan solas a la fila de abajo. */

.tp3d-pildoras-holder { display: none !important; }

.tp3d-pildoras {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 6px;   /* 10px entre filas, 6px entre píldoras de la misma fila */
  align-items: center;
  margin: 8px 0;
  padding: 0;
  list-style: none;
  line-height: 1;
}

.tp3d-pildoras--ficha { margin: 0 0 12px; }

/* Ficha: las destacadas van debajo de la foto, centradas */
.tp3d-pildoras--destacadas { justify-content: center; margin: 14px 0 0; }

.tp3d-pildora {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 999px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2px;
  text-decoration: none !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

a.tp3d-pildora:hover { filter: brightness(0.94); }

.tp3d-pildora--grande { font-size: 12px; padding: 6px 13px; }
.tp3d-pildora--chica { font-size: 11px; padding: 4px 10px; }

/* Destacada: sola en su fila y centrada, pero conserva su ancho (tipo "9 CUOTAS SIN INTERÉS").
   La fila ocupa el 100% y centra; la píldora sigue siendo una píldora, no una barra. */
.tp3d-pildora-linea {
  flex: 1 0 100%;
  display: flex;
  justify-content: center;
  width: 100%;
}
.tp3d-pildora--destacada {
  font-size: 14px;
  padding: 9px 18px;
  text-align: center;
}

.tp3d-pildora-icono { font-style: normal; font-size: 1.05em; line-height: 1; }
.tp3d-pildora-texto { overflow: hidden; text-overflow: ellipsis; }

/* En la ficha se ven un poco más grandes, como en el diseño de referencia */
.tp3d-pildoras--ficha .tp3d-pildora--grande { font-size: 13px; padding: 7px 15px; }
.tp3d-pildoras--ficha .tp3d-pildora--chica { font-size: 12px; padding: 5px 12px; }

/* Celular: un poco más chicas y con menos aire, para que entren más por fila */
@media (max-width: 767px) {
  .tp3d-pildoras { gap: 8px 5px; margin: 6px 0; }
  .tp3d-pildora--grande { font-size: 11px; padding: 5px 10px; }
  .tp3d-pildora--chica { font-size: 10px; padding: 4px 8px; }
  .tp3d-pildora--destacada { font-size: 12px; padding: 7px 12px; }
  .tp3d-pildoras--ficha .tp3d-pildora--grande { font-size: 12px; padding: 6px 12px; }
  .tp3d-pildoras--ficha .tp3d-pildora--chica { font-size: 11px; padding: 5px 10px; }
  /* Si el módulo está configurado con tope para celular, el JS marca las que sobran */
  .tp3d-pildora.tp3d-oculta-mobile { display: none !important; }
}

/* Que la tarjeta no recorte las píldoras y que no queden pegadas al borde.
   El JS copia el margen lateral del bloque de nombre/precio; esto es el respaldo. */
.tp3d-pildoras-en-tarjeta { width: 100%; box-sizing: border-box; padding-left: 10px; padding-right: 10px; }
.tp3d-pildoras--ficha.tp3d-pildoras-en-tarjeta { padding-left: 0; padding-right: 0; }