.burbujas{ display:flex; gap:26px; width:100%; justify-content:center; flex-wrap:wrap; }
.burbuja{
  position:relative;
  flex:1 1 0; min-width:230px; max-width:320px;
  background:#ffffff;
  border-radius:28px;
  padding:22px 22px 24px;
  text-align:center;
  animation:flota 5s ease-in-out infinite;
  transition:transform .2s ease, box-shadow .2s ease;
}
.burbuja:nth-child(2){ animation-delay:-2.5s; }
.burbuja:hover{ transform:translateY(-6px) scale(1.02); }
.burbuja::after{
  content:""; position:absolute; bottom:-15px; left:50%; transform:translateX(-50%);
  width:26px;height:26px; background:inherit;
  border-radius:0 0 0 8px;
  clip-path:polygon(0 0,100% 0,0 100%);
}
.burbuja.amarilla{ border:4px solid #e0ab00; box-shadow:0 8px 0 #ffe89a; }
.burbuja.amarilla::after{ border-left:4px solid #e0ab00; border-bottom:4px solid #e0ab00; }
.burbuja.roja{ border:4px solid #e23b3b; box-shadow:0 8px 0 #ffb1b1; }
.burbuja.roja::after{ border-left:4px solid #e23b3b; border-bottom:4px solid #e23b3b; }

.etiqueta-burbuja{
  display:inline-flex; align-items:center; gap:7px;
  font-weight:600; font-size:15px; padding:5px 14px; border-radius:999px; margin-bottom:14px;
  white-space:nowrap;
}
.amarilla .etiqueta-burbuja{ background:#ffd23f; color:#6b5300; }
.roja .etiqueta-burbuja{ background:#ff5c5c; color:#fff; }
.etiqueta-burbuja .v{ font-size:18px; font-weight:700; font-style:italic; }

.burbuja input{
  width:100%; text-align:center;
  font-family:'Fredoka',sans-serif; font-weight:600; font-size:34px; color:#23283a;
  border:none; outline:none; background:transparent; padding:4px 0;
  -moz-appearance:textfield;
}
.burbuja input::-webkit-outer-spin-button,
.burbuja input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.burbuja input::placeholder{ color:#cfcfc4; }

.estado-primo{
  margin-top:10px; min-height:24px;
  font-size:14px; font-weight:600;
  display:flex; align-items:center; justify-content:center; gap:6px;
  opacity:0; transform:translateY(4px); transition:.2s;
}
.estado-primo.ver{ opacity:1; transform:none; }
.estado-primo.ok{ color:#1ca34a; }
.estado-primo.mal{ color:#e23b3b; }
.estado-primo .ficha{
  width:20px;height:20px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:13px;font-weight:700;
}
.estado-primo.ok .ficha{ background:#1ca34a; }
.estado-primo.mal .ficha{ background:#ff5c5c; }